function GVerify(options) {
? ? console.log(); // 創(chuàng)建一個(gè)圖形驗(yàn)證碼對(duì)象，接收options對(duì)象為參數(shù)
? ? this.con = document.getElementById(options)
? ? this.options = { // 默認(rèn)options參數(shù)值
? ? ? ? id: '', // 容器Id
? ? ? ? canvasId: 'verifyCanvas', // canvas的ID
? ? ? ? width: this.con.offsetWidth, // 默認(rèn)canvas寬度
? ? ? ? height: this.con.offsetHeight, // 默認(rèn)canvas高度
? ? ? ? type: 'number', // 圖形驗(yàn)證碼默認(rèn)類型blend:數(shù)字字母混合類型、number:純數(shù)字、letter:純字母
? ? ? ? code: ''
? ? }

? ? if (Object.prototype.toString.call(options) === '[object Object]') { // 判斷傳入?yún)?shù)類型
? ? ? ? for (var i in options) { // 根據(jù)傳入的參數(shù)，修改默認(rèn)參數(shù)值
? ? ? ? ? ? this.options[i] = options[i]
? ? ? ? }
? ? } else {
? ? ? ? this.options.id = options
? ? }

? ? this.options.numArr = '0,1,2,3,4,5,6,7,8,9'.split(',')
? ? this.options.letterArr = getAllLetter()

? ? this._init()
? ? this.refresh()
}

GVerify.prototype = {
? ? /** 版本號(hào)**/
? ? version: '1.0.0',

? ? /** 初始化方法**/
? ? _init: function () {
? ? ? ? var canvas = document.createElement('canvas')
? ? ? ? canvas.id = this.options.canvasId
? ? ? ? let { width, height } = this.options
? ? ? ? canvas.width = width
? ? ? ? canvas.height = height
? ? ? ? canvas.style.cursor = 'pointer'
? ? ? ? canvas.innerHTML = '您的瀏覽器版本不支持canvas'
? ? ? ? this.con.appendChild(canvas)
? ? ? ? var parent = this
? ? ? ? canvas.onclick = function () {
? ? ? ? ? ? parent.refresh()
? ? ? ? }
? ? },

? ? /** 生成驗(yàn)證碼**/
? ? refresh: function () {
? ? ? ? var canvas = document.getElementById(this.options.canvasId)
? ? ? ? if (canvas.getContext) {
? ? ? ? ? ? var ctx = canvas.getContext('2d')
? ? ? ? }
? ? ? ? ctx.textBaseline = 'middle'

? ? ? ? ctx.fillStyle = randomColor(180, 240)
? ? ? ? ctx.fillRect(0, 0, this.options.width, this.options.height)

? ? ? ? if (this.options.type === 'blend') { // 判斷驗(yàn)證碼類型
? ? ? ? ? ? var txtArr = this.options.numArr.concat(this.options.letterArr)
? ? ? ? } else if (this.options.type === 'number') {
? ? ? ? ? ? var txtArr = this.options.numArr
? ? ? ? } else {
? ? ? ? ? ? var txtArr = this.options.letterArr
? ? ? ? }
? ? ? ? this.options.code = ''
? ? ? ? for (var i = 1; i <= 4; i++) {
? ? ? ? ? ? var txt = txtArr[randomNum(0, txtArr.length)]
? ? ? ? ? ? this.options.code += txt
? ? ? ? ? ? ctx.font = randomNum(this.options.height / 2, this.options.height) + 'px SimHei' // 隨機(jī)生成字體大小
? ? ? ? ? ? ctx.fillStyle = randomColor(50, 160) // 隨機(jī)生成字體顏色
? ? ? ? ? ? ctx.shadowOffsetX = randomNum(-3, 3)
? ? ? ? ? ? ctx.shadowOffsetY = randomNum(-3, 3)
? ? ? ? ? ? ctx.shadowBlur = randomNum(-3, 3)
? ? ? ? ? ? ctx.shadowColor = 'rgba(0, 0, 0, 0.3)'
? ? ? ? ? ? var x = this.options.width / 5 * i
? ? ? ? ? ? var y = this.options.height / 2
? ? ? ? ? ? var deg = randomNum(-30, 30)
? ? ? ? ? ? /** 設(shè)置旋轉(zhuǎn)角度和坐標(biāo)原點(diǎn)**/
? ? ? ? ? ? ctx.translate(x, y)
? ? ? ? ? ? ctx.rotate(deg * Math.PI / 180)
? ? ? ? ? ? ctx.fillText(txt, 0, 0)
? ? ? ? ? ? /** 恢復(fù)旋轉(zhuǎn)角度和坐標(biāo)原點(diǎn)**/
? ? ? ? ? ? ctx.rotate(-deg * Math.PI / 180)
? ? ? ? ? ? ctx.translate(-x, -y)
? ? ? ? }
? ? ? ? /** 繪制干擾線**/
? ? ? ? for (var i = 0; i < 4; i++) {
? ? ? ? ? ? ctx.strokeStyle = randomColor(40, 180)
? ? ? ? ? ? ctx.beginPath()
? ? ? ? ? ? ctx.moveTo(randomNum(0, this.options.width), randomNum(0, this.options.height))
? ? ? ? ? ? ctx.lineTo(randomNum(0, this.options.width), randomNum(0, this.options.height))
? ? ? ? ? ? ctx.stroke()
? ? ? ? }
? ? ? ? /** 繪制干擾點(diǎn)**/
? ? ? ? for (var i = 0; i < this.options.width / 4; i++) {
? ? ? ? ? ? ctx.fillStyle = randomColor(0, 255)
? ? ? ? ? ? ctx.beginPath()
? ? ? ? ? ? ctx.arc(randomNum(0, this.options.width), randomNum(0, this.options.height), 1, 0, 2 * Math.PI)
? ? ? ? ? ? ctx.fill()
? ? ? ? }
? ? },

? ? /** 驗(yàn)證驗(yàn)證碼**/
? ? validate: function (code) {
? ? ? ? var code = code.toLowerCase()
? ? ? ? var v_code = this.options.code.toLowerCase()
? ? ? ? if (code == v_code) {
? ? ? ? ? ? return true
? ? ? ? } else {
? ? ? ? ? ? return false
? ? ? ? }
? ? }
}
/** 生成字母數(shù)組**/
function getAllLetter() {
? ? var letterStr = 'a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z'
? ? return letterStr.split(',')
}
/** 生成一個(gè)隨機(jī)數(shù)**/
function randomNum(min, max) {
? ? return Math.floor(Math.random() * (max - min) + min)
}
/** 生成一個(gè)隨機(jī)色**/
function randomColor(min, max) {
? ? var r = randomNum(min, max)
? ? var g = randomNum(min, max)
? ? var b = randomNum(min, max)
? ? return 'rgb(' + r + ',' + g + ',' + b + ')'
}

export {
? ? GVerify
}

value:"",
verifyCode: "",

?mounted(){
? ? ? ? this.verifyCode = new GVerify("auth_code");
? ? },

<div id="auth_code"></div>?

if(this.verifyCode.validate(this.value)){
? ? ? ? ? ? ? ? ? ??
? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? ?this.$message({
? ? ? ? ? ? ? ? ? ? ? ? ? ? message: "驗(yàn)證碼錯(cuò)誤",
? ? ? ? ? ? ? ? ? ? ? ? ? ? type: 'warning'
? ? ? ? ? ? ? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? ? this.verifyCode.refresh();
? ? ? ? ? ? ? ? return
? ? ? ? ? ? }