生成登录页验证码

1). 生成验证码

在 src 新建 utils 文件夹,然后新建 createCaptcha.js 文件,复制贴入以下代码:

src/utils/createCaptcha.js

复制代码
 1 export default function(num = 6, letters = 'QWERTYUIOPLKJHGFDSAZXCVBNM1234567890') {
 2   let tpl = ''
 3   let captcha = []
 4 
 5   try {
 6     captcha = [...Array(num)].map(() => letters[Math.floor(Math.random() * letters.length)])
 7   } catch (e) {}
 8 
 9   captcha.forEach(item => {
10     tpl += `<span class="flex1 hcenter">${item}</span>`
11   })
12 
13   captcha = captcha.join('')
14 
15   return {
16     tpl,
17     captcha
18   }
19 }
复制代码

2). 使用验证码

1、打开 src/views/auth/Register.vue 文件,复制以下代码替换原 <script>

src/views/auth/Register.vue

复制代码
 1 <script>
 2 import createCaptcha from '@/utils/createCaptcha'
 3 
 4 export default {
 5   name: 'Register',
 6   data() {
 7     return {
 8       captchaTpl: '' // 验证码模板
 9     }
10   },
11   created() {
12     this.getCaptcha()
13   },
14   methods: {
15     getCaptcha() {
16       const { tpl, captcha } = createCaptcha()
17 
18       this.captchaTpl = tpl
19       this.localCaptcha = captcha
20     }
21   }
22 }
23 </script>
复制代码

2、查找 <div class="thumbnail",添加点击事件处理器 getCaptcha,并在其子元素上绑定 captchaTpl

src/views/auth/Register.vue

1 <!-- 修改 -->
2 <div class="thumbnail" title="点击图片重新获取验证码">
3   <div class="captcha"></div>
4 </div>
5 <!-- 为 -->
6 <div class="thumbnail" title="点击图片重新获取验证码" @click="getCaptcha">
7   <div class="captcha vcenter" v-html="captchaTpl"></div>
8 </div>

生命周期钩子created在实例创建完成后立即被调用,此时已经可以访问实例的数据对象和方法了。

posted @   前端极客  阅读(532)  评论(0编辑  收藏  举报
编辑推荐:
· ASP.NET Core - 日志记录系统(二)
· .NET 依赖注入中的 Captive Dependency
· .NET Core 对象分配(Alloc)底层原理浅谈
· 聊一聊 C#异步 任务延续的三种底层玩法
· 敏捷开发:如何高效开每日站会
阅读排行:
· 终于决定:把自己家的能源管理系统开源了!
· C#实现 Winform 程序在系统托盘显示图标 & 开机自启动
· 了解 ASP.NET Core 中的中间件
· 实现windows下简单的自动化窗口管理
· 【C语言学习】——命令行编译运行 C 语言程序的完整流程
点击右上角即可分享
微信分享提示