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怎么使用”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！