zoukankan      html  css  js  c++  java
  • 22、vue实现随机四位数验证码

    效果图:

    1、新建生成验证码的组件Sidentify.vue(代码如下):

    <template>
        <div class="s-canvas">
            <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas>
        </div>
    </template>
    <script>
    export default {
      name: "Sidentify",
      props: {
        identifyCode: {
          type: String,
          default: "1234"
        },
        fontSizeMin: {
          type: Number,
          default: 25
        },
        fontSizeMax: {
          type: Number,
          default: 30
        },
        backgroundColorMin: {
          type: Number,
          default: 255
        },
        backgroundColorMax: {
          type: Number,
          default: 255
        },
        colorMin: {
          type: Number,
          default: 0
        },
        colorMax: {
          type: Number,
          default: 160
        },
        lineColorMin: {
          type: Number,
          default: 100
        },
        lineColorMax: {
          type: Number,
          default: 255
        },
        dotColorMin: {
          type: Number,
          default: 0
        },
        dotColorMax: {
          type: Number,
          default: 255
        },
        contentWidth: {
          type: Number,
          default: 112
        },
        contentHeight: {
          type: Number,
          default: 31
        }
      },
      methods: {
        // 生成一个随机数
        randomNum(min, max) {
          return Math.floor(Math.random() * (max - min) + min);
        },
        // 生成一个随机的颜色
        randomColor(min, max) {
          let r = this.randomNum(min, max);
          let g = this.randomNum(min, max);
          let b = this.randomNum(min, max);
          return "rgb(" + r + "," + g + "," + b + ")";
        },
        drawPic() {
          let canvas = document.getElementById("s-canvas");
          let ctx = canvas.getContext("2d");
          ctx.textBaseline = "bottom";
          // 绘制背景
          ctx.fillStyle = this.randomColor(
            this.backgroundColorMin,
            this.backgroundColorMax
          );
          ctx.fillRect(0, 0, this.contentWidth, this.contentHeight);
          // 绘制文字
          for (let i = 0; i < this.identifyCode.length; i++) {
            this.drawText(ctx, this.identifyCode[i], i);
          }
          this.drawLine(ctx);
          this.drawDot(ctx);
        },
        drawText(ctx, txt, i) {
          ctx.fillStyle = this.randomColor(this.colorMin, this.colorMax);
          ctx.font =
            this.randomNum(this.fontSizeMin, this.fontSizeMax) + "px SimHei";
          let x = (i + 1) * (this.contentWidth / (this.identifyCode.length + 1));
          let y = this.randomNum(this.fontSizeMax, this.contentHeight - 5);
          var deg = this.randomNum(-45, 45);
          // 修改坐标原点和旋转角度
          ctx.translate(x, y);
          ctx.rotate(deg * Math.PI / 180);
          ctx.fillText(txt, 0, 0);
          // 恢复坐标原点和旋转角度
          ctx.rotate(-deg * Math.PI / 180);
          ctx.translate(-x, -y);
        },
        drawLine(ctx) {
          // 绘制干扰线
          for (let i = 0; i < 5; i++) {
            ctx.strokeStyle = this.randomColor(
              this.lineColorMin,
              this.lineColorMax
            );
            ctx.beginPath();
            ctx.moveTo(
              this.randomNum(0, this.contentWidth),
              this.randomNum(0, this.contentHeight)
            );
            ctx.lineTo(
              this.randomNum(0, this.contentWidth),
              this.randomNum(0, this.contentHeight)
            );
            ctx.stroke();
          }
        },
        drawDot(ctx) {
          // 绘制干扰点
          for (let i = 0; i < 80; i++) {
            ctx.fillStyle = this.randomColor(0, 255);
            ctx.beginPath();
            ctx.arc(
              this.randomNum(0, this.contentWidth),
              this.randomNum(0, this.contentHeight),
              1,
              0,
              2 * Math.PI
            );
            ctx.fill();
          }
        }
      },
      watch: {
        identifyCode() {
          this.drawPic();
        }
      },
      mounted() {
        this.drawPic();
      }
    };
    </script>
    <style scoped>
    .s-canvas {
      height: 38px;
    }
    .s-canvas canvas {
      margin-top: 1px;
      margin-left: 8px;
    }
    </style>

    2、在需要的页面引入该组件并使用:

     
       <el-form-item prop="code">
          <el-input v-model="form.code" autocomplete="off" placeholder="请输入验证码"  style="150px;float:left"></el-input>
                  <div class="login-code" @click="refreshCode">
                    <!--验证码组件-->
                    <Sidentify :identifyCode="identifyCode" />
                  </div>
                </el-form-item>
    import Sidentify from "../utils/Sidentify.vue";
    components: {
    Sidentify
    },
    data(){
    return{
         identifyCodes: "1234567890",
         identifyCode: "",

    }
    }


    3、获取验证码的方法:

    methods:{
    //验证码
    randomNum(min, max) {
       return Math.floor(Math.random() * (max - min) + min);
    },

    refreshCode() {
       this.identifyCode = "";
       this.makeCode(this.identifyCodes, 4);
    },
    makeCode(o, l) {
       for (let i = 0; i < l; i++) {
        this.identifyCode += this.identifyCodes[
        this.randomNum(0, this.identifyCodes.length)
       ];
    }
       console.log(this.identifyCode);
    }
    },
    created() {
      //初始化验证码
      this.refreshCode();
    },
    mounted() {
      this.identifyCode = "";
      this.makeCode(this.identifyCodes, 4);
    }
     
    不存在一劳永逸的技术,唯有坚持不懈的努力.
  • 相关阅读:
    VIJOS-P1340 拯救ice-cream(广搜+优先级队列)
    uva 11754 Code Feat
    uva11426 GCD Extreme(II)
    uvalive 4119 Always an Interger
    POJ 1442 Black Box 优先队列
    2014上海网络赛 HDU 5053 the Sum of Cube
    uvalive 4795 Paperweight
    uvalive 4589 Asteroids
    uvalive 4973 Ardenia
    DP——数字游戏
  • 原文地址:https://www.cnblogs.com/xlfdqf/p/11195078.html
Copyright © 2011-2022 走看看