生成登录页验证码

最新推荐文章于 2023-11-02 20:13:42 发布

weixin_34357267

最新推荐文章于 2023-11-02 20:13:42 发布

阅读量108

点赞数

文章标签： javascript ViewUI

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在实例创建完成后立即被调用，此时已经可以访问实例的数据对象和方法了。