精华内容
下载资源
问答
  • 本篇文章主要介绍了vue生成随机验证码的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 验证码功能在我们的身边用处极广,今天小编给大家分享基于vue实现随机验证码功能,感兴趣的朋友跟随小编一起看看吧
  • 随机验证码组件 封装组件 <template> <div class="s-canvas"> <canvas id="s-canvas" :width="contentWidth" :height="contentHeight" ></canvas> </div> </template> &...

    vue 组件开发 源码
    随机验证码组件 封装组件
    identify这是一个vue的插件,使用canvas来生成图形验证码。

    <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: 20,
        },
        fontSizeMax: {
          type: Number,
          default: 35,
        },
        backgroundColorMin: {
          type: Number,
          default: 180,
        },
        backgroundColorMax: {
          type: Number,
          default: 240,
        },
        colorMin: {
          type: Number,
          default: 50,
        },
        colorMax: {
          type: Number,
          default: 160,
        },
        lineColorMin: {
          type: Number,
          default: 40,
        },
        lineColorMax: {
          type: Number,
          default: 180,
        },
        dotColorMin: {
          type: Number,
          default: 0,
        },
        dotColorMax: {
          type: Number,
          default: 255,
        },
        contentWidth: {
          type: Number,
          default: 112,
        },
        contentHeight: {
          type: Number,
          default: 38,
        },
      },
      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 < 3; 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 < 30; 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>
    

    使用页面引用组件SIdentify 单页面引用就可以

    <template>
      <div class="coderight" @click="refreshCode">
        验证码:
        <SIdentify :identifyCode="identifyCode"></SIdentify>
      </div>
    </template>
    
    <script>
    import SIdentify from "./SIdentify.vue";
    export default {
      name: "userLogin",
      components: { SIdentify },
      data() {
        return {
          // 验证码组件
          identifyCodes: "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz0123456789",
          identifyCode: "",
        };
      },
      mounted() {
        this.identifyCode = "";
        this.makeCode(this.identifyCodes, 4);
      },
      created() {},
      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);
        },
      },
    };
    </script>
    
    <style>
    </style>
    <style lang="less" scoped>
    .login-code {
      cursor: pointer;
      margin: 0;
    }
    </style>
    
    

    注意图片验证码的宽高是由参数 contentWidth 和 contentHeight 决定的
    效果如下
    在这里插入图片描述

    展开全文
  • vue生成图片验证码

    2021-09-30 13:59:54
    identify.vue(子组件):是一个独立的组件,负责生成验证码和绘制图片; codetest.vue(父组件):引入identify.vue(子组件),只有两个动作:发指令和接收验证码 // 子组件identify.vue组件(主要用于定义参数和...

    identify.vue(子组件):是一个独立的组件,负责生成验证码和绘制图片;
    codetest.vue(父组件):引入identify.vue(子组件),只有两个动作:发指令和接收验证码

    // 子组件identify.vue组件(主要用于定义参数和方法) 
    <template>
      <div class="s-canvas">
        <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas>
      </div>
    </template>
    <script>
      export default{
        name: 'SIdentify',
        props: {
          fresh:true,
          fontSizeMin: {
            type: Number,
            default: 20
          },
          fontSizeMax: {
            type: Number,
            default: 36
          },
          backgroundColorMin: {
            type: Number,
            default: 180
          },
          backgroundColorMax: {
            type: Number,
            default: 240
          },
          colorMin: {
            type: Number,
            default: 50
          },
          colorMax: {
            type: Number,
            default: 160
          },
          lineColorMin: {
            type: Number,
            default: 40
          },
          lineColorMax: {
            type: Number,
            default: 180
          },
          dotColorMin: {
            type: Number,
            default: 0
          },
          dotColorMax: {
            type: Number,
            default: 255
          },
          contentWidth: {
            type: Number,
            default: 112
          },
          contentHeight: {
            type: Number,
            default: 38
          }
        },
        data() {
          return {
            identifyCodes: "1234567890",
            identifyCode: ""
          };
        },
        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(-10, 10)
        // 修改坐标原点和旋转角度
        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 < 3; 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 < 30; 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()
        }
      },
      // 生成四位随机验证码
      makeCode(o, l) {
            this.identifyCode="";
            for (let i = 0; i < l; i++) {
              this.identifyCode += this.identifyCodes[
                this.randomNum(0, this.identifyCodes.length)
                ];
            }
            //绘制图片
            this.drawPic()
            //传值给父组件
            this.$emit('makedCode',this.identifyCode);
      }
      },
      watch: {
        fresh () {   //监听事件
          this.makeCode(this.identifyCodes, 4);
        }
      },
      }
    </script>
    
    // 父组件 codetest.vue 
    <template>
      <div class="code" @click="refreshCode">
     <!--   :fresh:父组件向子组件传送刷新验证码的信号;
        @makedCode:子组件向父组件传送验证码的值-->
        <s-identify :fresh="flag" @makedCode="getMakedCode"></s-identify>
      </div>
    </template>
    
    <script>
      import SIdentify from '@/components/identify.vue'
      export default {
        name: "codetest",
        data() {
          return {
            flag:true,  //该值变化,就会触发刷新
            code:'',  //刷新后的验证码
          };
        },
      components : {
        SIdentify,
      },
      // 验证码初始化
      mounted() {
        this.flag = !this.flag;
      },
      methods: {
        // 切换验证码
        refreshCode() {
          this.flag = !this.flag;
        },
        getMakedCode(code){
          this.code = code
          console.log("getMakedCode:",this.code);
        }
      }
      };
    </script>
    <style>
      .code {
        /*margin: 400px auto;*/
        width: 114px;
        height: 40px;
        /*border: 1px solid red;*/
      }
    </style>
    

    效果如图
    验证码效果

    展开全文
  • 一、验证码组件 <template> <div> <div id="codeBox"> <canvas width="112" height="38" id="verifyCanvas"></canvas> </div> <img id="code_img" @click="refreshCode...

    一、验证码组件

    <template>
      <div>
        <div id="codeBox">
          <canvas width="112" height="38" id="verifyCanvas"></canvas>
        </div>
        <img id="code_img" @click="refreshCode">
      </div>
    </template>
    <script>
    export default {
      data() {
        return {
          // 验证码加入的随机总内容,可自行加入英文字母
          nums: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],
          code: ''
        }
      },
      created() {
      },
      mounted() {
        this.drawCode()
        // 监听父组件触发子组件事件
        this.$on('bridge', (val) => {
          this.refreshCode()
        })
      },
      methods: {
        // 绘制验证码
        drawCode() {
          // 获取HTML端画布
          var canvas = document.getElementById('verifyCanvas')
          // 获取画布2D上下文
          var context = canvas.getContext('2d')
          // 画布填充色
          context.fillStyle = 'cornflowerblue'
          context.fillRect(0, 0, canvas.width, canvas.height)
          // 创建渐变
          var gradient = context.createLinearGradient(0, 0, canvas.width, 0)
          gradient.addColorStop('0', 'magenta')
          gradient.addColorStop('0.5', 'blue')
          gradient.addColorStop('1.0', 'red')
          // 清空画布
          // 设置字体颜色
          context.fillStyle = gradient
          // 设置字体
          context.font = '25px Arial'
          // 生成的验证码数组
          var rand = []
          // 验证码位置
          var x = []
          var y = []
          for (let i = 0; i < 4; i++) {
            rand[i] = this.nums[Math.floor(Math.random() * this.nums.length)]
            x[i] = i * 16 + 20
            y[i] = Math.random() * 20 + 20
            context.fillText(rand[i], x[i], y[i])
          }
          this.code = rand.join('')
          // 触发getCode事件,传值验证码给父组件
          this.$emit('getCode', this.code)
          // 画3条随机线
          for (let i = 0; i < 3; i++) {
            this.drawline(canvas, context)
          }
    
          // 画30个随机点
          for (let i = 0; i < 30; i++) {
            this.drawDot(canvas, context)
          }
          this.convertCanvasToImage(canvas)
        },
        // 随机线
        drawline(canvas, context) {
          // 随机线的起点x坐标是画布x坐标0位置,y坐标是画布高度的随机数
          context.moveTo(Math.floor(Math.random() * canvas.width), Math.floor(Math.random() * canvas.height))
          // 随机线的终点x坐标是画布宽度,y坐标是画布高度的随机数
          context.lineTo(Math.floor(Math.random() * canvas.width), Math.floor(Math.random() * canvas.height))
          // 随机线宽
          context.lineWidth = 0.5
          // 随机线描边属性
          context.strokeStyle = 'rgba(50,50,50,0.3)'
          // 描边,即起点描到终点
          context.stroke()
        },
        // 随机点(所谓画点其实就是画1px像素的线,方法不再赘述)
        drawDot(canvas, context) {
          var px = Math.floor(Math.random() * canvas.width)
          var py = Math.floor(Math.random() * canvas.height)
          context.moveTo(px, py)
          context.lineTo(px + 1, py + 1)
          context.lineWidth = 0.2
          context.stroke()
        },
        // 绘制图片
        convertCanvasToImage(canvas) {
          document.getElementById('verifyCanvas').style.display = 'none'
          var image = document.getElementById('code_img')
          image.src = canvas.toDataURL('image/png')
          return image
        },
        // 刷新验证码
        refreshCode() {
          var parent = document.getElementById('codeBox')
          var codeObj = document.getElementById('verifyCanvas')
          parent.removeChild(codeObj)
          var canvas = document.createElement('canvas')
          canvas.width = '112'
          canvas.height = '38'
          canvas.id = 'verifyCanvas'
          parent.appendChild(canvas)
          this.drawCode()
        }
      }
    }
    </script>
    <style lang="scss" scoped>
    #code_img {
      width: 112px;
      height: 38px;
      cursor: pointer;
      vertical-align: top;
    }
    </style>
    

    二、父组件使用验证码

    <template>
    	<div class="identifybox">
    		<div>
    		  <s-identify @getCode="getIdentifyCode" ref="code"></s-identify>
    		</div>
    		<el-button @click="refreshCode" type='text'>看不清,换一张</el-button>
    	</div>
    </template>
    
    <script>
    	import SIdentify from '@/components/identify/identify.vue'
    	export default{
    		data() {
    			return {
    				identifyCode: '', // 生成的验证码
    			}
    		},
    		components: {
    		    SIdentify
    		},
    		methods: {
    			// 获取验证码
    			getIdentifyCode(val) {
    			  this.identifyCode = val
    			},
    			// 切换验证码(点击文字切换)
    			refreshCode() {
    			  this.identifyCode = ''
    			  // 触发子组件刷新验证码事件
    			  this.$refs.code.$emit('bridge')
    			}
    		}
    	}
    </script>
    
    <style>
    </style>
    

    三、效果图
    在这里插入图片描述

    展开全文
  • vue实现随机验证码功能(完整代码)发布时间:2020-10-22 17:18:46来源:脚本之家阅读:123作者:遇你温柔如初效果图:1.html代码验证码:2.css样式/*验证码样式*/.code{width:124px;height:31px;border:1px solid ...

    vue实现随机验证码功能(完整代码)

    发布时间:2020-10-22 17:18:46

    来源:脚本之家

    阅读:123

    作者:遇你温柔如初

    效果图:

    269c15af841b7876168246281eae199a.png

    1.html代码

    14a7796184137ff0ec6eb97f1b12b604.png

    验证码:

    2.css样式

    1f7ea684b7d41ded861845ee0b700e24.png

    /*验证码样式*/

    .code{

    width:124px;

    height:31px;

    border:1px solid rgba(186,186,186,1);

    }

    .login-code{

    cursor: pointer;

    }

    CSS 代码

    3.js引入验证码组件,并且定义三个变量。

    cf9c8d44281bb275527b8534e1218fcb.png

    import SIdentify from '../components/sidentify'

    components: { SIdentify },

    data () {

    return {

    identifyCodes: "1234567890",

    identifyCode: "",

    code:"",//text框输入的验证码

    }

    },

    引入验证码组件,以及需要定义的变量

    4.mounted里的代码

    379717f35f44f448d83e7e90260c38dd.png

    mounted(){

    this.identifyCode = "";

    this.makeCode(this.identifyCodes, 4);

    },

    mounted代码

    5.在created里初始化验证码

    ba10d52675e4091c6c88a6a81abca12d.png

    6.methods里添加以下方法。

    7b395e1db66322855ff4ddd78977430c.png

    //验证码

    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);

    },

    需要用到的方法

    在提交表单的时候对验证码进行判断。

    1837726448e2e0d1270676dee88609f0.png

    sidentify.vue组件代码:

    c10911dbf3c171d11f9cdcd42a2f023e.png

    代码:

    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()

    }

    }

    .s-canvas {

    height: 38px;

    }

    .s-canvas canvas{

    margin-top: 1px;

    margin-left: 8px;

    }

    这篇文章是我参考别人写的,很感谢那个博主。

    总结

    以上所述是小编给大家介绍的vue实现随机验证码功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对亿速云网站的支持!

    如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

    展开全文
  • < el-form-item prop=“verifycode” style=“line-... el-input v-model=“loginForm.verifycode” placeholder=“请输入验证码” class=“identifyinput” style=“width:150px;”>< /el-input> ...
  • vue--identify 生成随机验证码

    千次阅读 2018-08-29 17:48:01
    随机验证码
  • vue2.0 随机验证码

    2019-08-06 15:20:32
    //生成随机验证码 var code = ""; var codeLength = parseInt(length); //验证码的长度 ////所有候选组成验证码的字符,当然也可以用中文的 var codeChars = new Array( 0, 1, 2, 3, 4, 5, 6, 7, 8, ...
  • 步骤1创建一个名为identify.vue的子组件 <template> <div class="s-canvas"> <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas> </div> </...
  • vue3 随机生成验证码

    2021-09-11 21:52:36
    js setup() { const verify = ref(null) const state = reactive({ pool: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890', // 字符串 width: 120, height: 40, imgCode: '' }) onMounted(() => { // 初始化绘制图片验证码 ...
  • 效果图: 1.html代码 1 <div class="form-group" style="display: flex;"> 2 <div> 3 <span>验证码:</span> 4 ...
  • // 生成一个随机的颜色 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 + ')' }, ...
  • vue生成验证码

    2019-06-27 12:44:51
    Vue生成验证码 使用canvas来实现生成验证码 首先建一个组件 identify.vue 代码如下 <template> <div class="s-canvas"> <canvas id="s-canvas" :width="contentWidth" :height="contentHeight">...
  • 效果图:1.html代码验证码:2.css风格/*验证码风格*/.code{width:124px;height:31px;border:1px solid rgba(186,186,186,1);}.login-code{cursor: pointer;}CSS 代码3.js引入验证码组件,并且定义三个变量。import ...
  • vue 前端生成验证码

    2020-09-02 17:16:51
    //验证码相关 createCode(len) { var seed = new Array( // 'abcdefghijklmnopqrstuvwxyz', // 'ABCDEFGHIJKLMNOPQRSTUVWXYZ', '0123456789', '0123456789', ...
  • vue 随机动态验证码

    2020-02-22 13:20:04
    el-form-item prop="phoneCode" label="验证码"> <el-input ref="phoneCode" v-model="loginForm.phoneCode" placeholder="请输入验证码" name="phoneCode" type="text" tabindex="1" ...
  • js生成随机验证码

    2021-07-03 10:03:35
    如何用原生js生成随机的验证吗?可以直接复制看效果哟,快来试试吧! <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=...
  • vue前端生成简易验证码

    千次阅读 2019-07-02 13:38:14
    vue前端生成简易验证码identify 生成验证码图片引入到登录校验表单配置js效果展示 identify 生成验证码图片 <template> <div class="s-canvas"> <canvas id="s-canvas" :width="contentWidth" :...
  • identify 是一个vue的组件,使用canvas来生成图形验证码。 identify: 在 components 文件夹下创建 identify.vue文件,代码如下 <template> <div class="s-canvas"> <canvas id="s-canvas" :width...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,082
精华内容 432
关键字:

vue生成随机验证码

vue 订阅