生成登录页验证码

1). 生成验证码

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

src/utils/createCaptcha.js

export default function(num = 6, letters = 'QWERTYUIOPLKJHGFDSAZXCVBNM1234567890') {
  let tpl = ''
  let captcha = []

  try {
    captcha = [...Array(num)].map(() => letters[Math.floor(Math.random() * letters.length)])
  } catch (e) {}

  captcha.forEach(item => {
    tpl += `<span class="flex1 hcenter">${item}</span>`
  })

  captcha = captcha.join('')

  return {
    tpl,
    captcha
  }
}

2). 使用验证码

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

src/views/auth/Register.vue

<script>
import createCaptcha from '@/utils/createCaptcha'

export default {
  name: 'Register',
  data() {
    return {
      captchaTpl: '' // 验证码模板
    }
  },
  created() {
    this.getCaptcha()
  },
  methods: {
    getCaptcha() {
      const { tpl, captcha } = createCaptcha()

      this.captchaTpl = tpl
      this.localCaptcha = captcha
    }
  }
}
</script>

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

src/views/auth/Register.vue

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

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