elmentui的短信验证界⾯_vue+element-ui集成随机验证码+⽤
户名+密码的。。。
在登⼊页⾯，我们往往需要通过输⼊验证码才能进⾏登⼊，那我们下⾯就详讲⼀下在vue项⽬中如何配合element-ui实现这个功能
第⼀步：⾃定义⼀个⽣产随机验证码的组件，其本质是使⽤canvas绘制，详细代码如下：
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) {
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 = ElementById('s-canvas')
var ctx = Context('2d')
// 绘制背景
ctx.fillStyle = this.randomColor(
this.backgroundColorMin,
this.backgroundColorMax
)
ctx.fillRect(0, 0, tWidth, tHeight)
// 绘制⽂字
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.lorMin, lorMax)
ctx.font =
this.randomNum(this.fontSizeMin, this.fontSizeMax) + 'px SimHei' var x = (i + 1) * (tWidth / (this.identifyCode.length + 1)) var y = this.randomNum(this.fontSizeMax, tHeight - 5) var deg = this.randomNum(-45, 45)
// 修改坐标原点和旋转⾓度
ctx.fillText(txt, 0, 0)
// 恢复坐标原点和旋转⾓度
},
drawLine(ctx) {
// 绘制⼲扰线
for (let i = 0; i < 8; i++) {
ctx.strokeStyle = this.randomColor( this.lineColorMin,
this.lineColorMax
)
ctx.beginPath()
this.randomNum(0, tWidth), this.randomNum(0, tHeight) )
ctx.lineTo(
this.randomNum(0, tWidth), this.randomNum(0, tHeight) )
ctx.stroke()
}
},
drawDot(ctx) {
// 绘制⼲扰点
for (let i = 0; i < 100; i++) {
ctx.fillStyle = this.randomColor(0, 255) ctx.beginPath()
ctx.arc(
this.randomNum(0, tWidth), this.randomNum(0, tHeight), 1,
0,
2 * Math.PI
)
ctx.fill()
}
}
},
watch: {
identifyCode() {
this.drawPic()
}
},
mounted() {
this.drawPic()
}
}
第⼆步：使⽤该组件：
我们⾸先新建⼀个vue组件，在该组件进⾏布局，其中还包括⽤户名和密码的验证(这只是前端的简单验证，真实项⽬中还需要请求登⼊接⼝进⾏后端验证)
看不清，换⼀张
记住账号
登录
第三步：⽣产随机码与进⾏登⼊验证
import { isvalidUsername } from '@/utils/validate'
import SIdentify from '@/components/identify/identify.vue'
export default {
name: 'userlogin',
data() {
// ⽤户名⾃定义验证规则
const validateUsername = (rule, value, callback) => {
if (!isvalidUsername(value)) {
callback(new Error('请输⼊正确的⽤户名'))
} else {
console.log('user', value)
callback()
}
vue element admin
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。