登录页添加验证码
新建ValidCode组件
内容如下，直接copy即可：
<template><divclass="ValidCode disabled-select":style="`width:${width}; height:${height}`"@click="refreshCode"><spanv-for="(item, index) in codeList":key="index":style="getStyle(item)">{{ item.code }}</span></div></template><script>export default {name: 'ValidCode',model: {prop: 'value',event: 'input'},props: {width: {type: String,default: '100px'},height: {type: String,default: '40px'},length: {type: Number,default: 4},refresh: {type: Number}},data () {return {codeList: []}},watch: {refresh () {this.createdCode()}},mounted () {this.createdCode()},methods: {refreshCode () {this.createdCode()},createdCode () {const len = this.lengthconst codeList = []const chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz0123456789'const charsLen = chars.length// 生成for (let i = 0; i < len; i++) {const rgb = [Math.round(Math.random() * 220), Math.round(Math.random() * 240), Math.round(Math.random() * 200)]codeList.push({code: chars.charAt(Math.floor(Math.random() * charsLen)),color: `rgb(${rgb})`,fontSize: `${10 + (+[Math.floor(Math.random() * 10)] + 6)}px`,padding: `${[Math.floor(Math.random() * 10)]}px`,transform: `rotate(${Math.floor(Math.random() * 90) - Math.floor(Math.random() * 90)}deg)`})}// 指向this.codeList = codeList// 将当前数据派发出去// console.log(codeList.map(item => item.code).join(''))this.$emit('input', codeList.map(item => item.code).join(''))},getStyle (data) {return `color: ${data.color}; font-size: ${data.fontSize}; padding: ${data.padding}; transform: ${data.transform}`}}}</script><style scoped>.ValidCode{display: flex;justify-content: center;align-items: center;cursor: pointer;}.ValidCode span{display: inline-block;}</style>
在Login.vue里面新增表单
导入组件，新建变量 validCode
新增方法：createValidCode，用来接收组件传过来的验证码并赋值给data中的变量valideCode
在login方法里校验
if (!this.form.validCode) {this.$message.error("请填写验证码")return}if(this.form.validCode.toLowerCase() !== this.validCode.toLowerCase()) {this.$message.error("验证码错误")return}
