<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: { // 生成一個(gè)隨機(jī)數(shù) ? ?
? ?randomNum(min, max) {
? ? return Math.floor(Math.random() * (max - min) + min)
? ?},
? ?// 生成一個(gè)隨機(jī)的顏色
? ?randomColor(min, max) {
? ? var r = this.randomNum(min, max)
? ? var g = this.randomNum(min, max)
? ? var b = this.randomNum(min, max)
? ? return 'rgb(' + r + ',' + g + ',' + b + ')'
? ?},
? ?drawPic() {
? ? var canvas = document.getElementById('s-canvas')
? ? var 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';
? var x = (i + 1) * (this.contentWidth / (this.identifyCode.length + 1))
? var y = this.randomNum(this.fontSizeMax,this.contentHeight - 5)
? var deg = this.randomNum(-45, 45)
? ? // 修改坐標(biāo)原點(diǎn)和旋轉(zhuǎn)角度?
? ? ctx.translate(x, y)
? ? ctx.rotate(deg * Math.PI / 180)
? ? ctx.fillText(txt, 0, 0)
? ? // 恢復(fù)坐標(biāo)原點(diǎn)和旋轉(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) {
? ? // 繪制干擾點(diǎn) ?
? ? 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>

<el-form-item prop="verifycode">
? ? ?<el-input v-model="param.verifycode" placeholder="請(qǐng)輸入驗(yàn)證碼" class="identifyinput" @keyup.enter.native="submitForm()">
? ? ?</el-input>
? ? </el-form-item>
? ? <el-form-item>
? ? ?<div class="identifybox">
? ? ? <div @click="refreshCode">
? ? ? ?<s-identify :identifyCode="identifyCode"></s-identify>
? ? ? </div>
? ? ? <el-button @click="refreshCode" type='text' class="textbtn">看不清，換一張</el-button>
? ? ?</div>
</el-form-item>

import SIdentify from '../../components/page/identify.vue'

export default {
?? ?data: function() {
?? ?/* 自定義驗(yàn)證碼規(guī)則 */
? ?const validateVerifycode = (rule, value, callback) => {
? ? if (value === '') {
? ? ?callback(new Error('請(qǐng)輸入驗(yàn)證碼'))
? ? } else if (value !== this.identifyCode) {
? ? ?console.log('validateVerifycode:', value);
? ? ?callback(new Error('驗(yàn)證碼不正確!'))
? ? } else {
? ? ?callback()
? ? }
? ?}
?? ?return {
?? ??? ?identifyCodes: '1234567890abcdefghijklmnopqrstuvwxyz',
? ?? ??? ?identifyCode: '',
? ?? ??? ?rules:{
? ?? ??? ?verifycode: [{
? ? ? required: true,
? ? ? trigger: 'blur',
? ? ? validator: validateVerifycode,
? ? ?}]
?? ??? ??? ?}
?? ??? ?};
?? ?},
?? ?components:{
?? ?SIdentify
?? ?},
?? ?mounted(){
?? ?this.identifyCode='';
?? ?this.makeCode(this.identifyCodes,4);
?? ?disableBrowserBack();
?? ? history.pushState(null, null, document.URL);
?? ? ?if (window.history && window.history.pushState) {
? ? ? ? ? ? $(window).on('popstate', function (){
? ? ? ? ? ? ? ? window.history.pushState('forward', null, '');
? ? ? ? ? ? ? ? window.history.forward(1);
? ? ? ? ? ?});
? ? ? ? ? ? window.history.pushState('forward', null, ''); ?//在IE中必須得有這兩行
? ? ? ?window.history.forward(1);
?? ?},
?? ?methods:{
?? ?randomNum(min, max) {
? ? return Math.floor(Math.random() * (max - min) + min)
? ?},
? ?// 切換驗(yàn)證碼 ??
? ?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)
? ? /* alert(this.identifyCode) */
? ?}
?? ?}
}

?.identifybox {
? display: flex;
? justify-content: space-between;
? margin-top: 7px;
?}