vue驗證碼(identify)插件使用方法詳解

更新時間：2022年04月22日 16:43:56 作者：莫逸雪

這篇文章主要為大家詳細(xì)介紹了vue驗證碼插件使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

identify是一款使用使用canvas來生成圖形驗證碼的vue插件。

代碼：

identify.vue組件（主要用于定義參數(shù)和方法）

<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: {
? ? ? // 生成一個隨機(jī)數(shù)
? ? ? randomNum (min, max) {
? ? ? ? return Math.floor(Math.random() * (max - min) + min)
? ? ? },
? ? ? // 生成一個隨機(jī)的顏色
? ? ? 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)
? ? ? ? // 修改坐標(biāo)原點和旋轉(zhuǎn)角度
? ? ? ? ctx.translate(x, y)
? ? ? ? ctx.rotate(deg * Math.PI / 180)
? ? ? ? ctx.fillText(txt, 0, 0)
? ? ? ? // 恢復(fù)坐標(biāo)原點和旋轉(zhuǎn)角度
? ? ? ? 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進(jìn)行引入（注意路徑的地址）：

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

codetest.vue(在頁面進(jìn)行使用)：

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

效果圖：