效果图
父组件中随机生成一串字符转,数字+字母
mounted(){
this.createCode()
},
methods:{
createCode() {
var text = "";
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
// 设置验证码长度,
for( var i=0; i < 4; i++ ){
text += possible.charAt(Math.floor(Math.random() * possible.length));
}
this.code = text
},
}
导入并注册子组件
import SIdentify from 'components/common/code/SIdentify'
export default {
components:{
SIdentify
},
data(){
return{
code:'',
inputCode:'',
}
},
}
然后在登录表单中加上
< div style =" display : flex" >
< el-input type = " text" v-model = " inputCode" style =" width : 190px" placeholder = " 请输入验证码" clearable > </ el-input>
< span @click = " createCode" > < SIdentify :identifyCode = " code" > </ SIdentify> </ span>
</ div>
最后在登录方法中判断 inputCode 是否等于 code就可以了,加 .toLowerCace() 是为了不区分大小写
if(this.inputCode == ''){
this.$message.error('请输入验证码')
return
}
if(this.inputCode.toLowerCase() != this.code.toLowerCase()){
this.$message.error('验证码错误')
this.inputCode = ''
this.createCode()
return
}
子组件 SIdentify 的完整代码
< 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 : 25
} ,
fontSizeMax: {
type: Number,
default : 30
} ,
backgroundColorMin: {
type: Number,
default : 255
} ,
backgroundColorMax: {
type: Number,
default : 255
} ,
colorMin: {
type: Number,
default : 0
} ,
colorMax: {
type: Number,
default : 160
} ,
lineColorMin: {
type: Number,
default : 100
} ,
lineColorMax: {
type: Number,
default : 255
} ,
dotColorMin: {
type: Number,
default : 0
} ,
dotColorMax: {
type: Number,
default : 255
} ,
contentWidth: {
type: Number,
default : 132
} ,
contentHeight: {
type: Number,
default : 31
}
} ,
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 < 5 ; 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 < 80 ; 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>
< style scoped >
.s-canvas {
height : 38px;
}
.s-canvas canvas {
margin-top : 1px;
margin-left : 8px;
}
</ style>