vue验证码插件identify怎么使用

vue验证码插件identify怎么使用

本篇内容主要讲解“vue验证码插件identify怎么使用”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“vue验证码插件identify怎么使用”吧!

代码：

identify.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: 16        },        fontSizeMax: {          type: Number,          default: 40        },        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 < 8; 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 < 100; 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>

在 main.js进行引入（注意路径的地址）：

import SIdentify from './components/page/identify'  Vue.component('s-identify', SIdentify)

codetest.vue(在页面进行使用)：

<template>      <div class="code" @click="refreshCode">      <s-identify :identifyCode="identifyCode"></s-identify>    </div>  </template>    <script>  export default {    name: "codetest",    data() {      return {        identifyCodes: "1234567890",        identifyCode: ""      };    },    mounted() {      this.identifyCode = "";      this.makeCode(this.identifyCodes, 4);    },    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>  .code {    margin: 400px auto;    width: 114px;    height: 40px;    border: 1px solid red;  }  </style>

效果图：

参数配置表：

到此，相信大家对“vue验证码插件identify怎么使用”有了更深的了解，不妨来实际操作一番吧！这里是高防服务器网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！

[微信提示：高防服务器能助您降低 IT 成本，提升运维效率，使您更专注于核心业务创新。

[图文来源于网络，不代表本站立场，如有侵权，请联系高防服务器网删除]
[