登录界面
SIdentify
创建验证码组件，实现绘画出图片验证码
.s-canvas { height: 38px; } .s-canvas canvas{ margin-top: 1px; margin-left: 8px; }
在登录界面引入验证码组件并注册
import SIdentify from '@/components/common/SIdentify'
components: { SIdentify },
登录的form
登录 Tips : 请输入账号密码登陆
点击刷新验证码
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)
]
}
}
总结
以上所述是小编给大家介绍的Vue 实现登录界面验证码功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对考高分网网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
