登录页添加验证码

1. 引入验证码页面组件：ValidCode.vue

<template><div class="ValidCodeContent" style=""><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><div class="kbq" @click="refreshCode">看不清</div></div>
</template><script>
export default {name: 'validCode',props: {width: {type: String,default: '100px',},height: {type: String,default: '40px',},length: {type: Number,default: 4,},},data() {return {codeList: [],}},mounted() {this.createdCode()},methods: {refreshCode() {this.createdCode()},createdCode() {let len = this.length,codeList = [],chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz0123456789',charsLen = chars.length// 生成for (let i = 0; i < len; i++) {let 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: `1${[Math.floor(Math.random() * 1 + 9)]}px`,padding: `${[Math.floor(Math.random() * 2 + 4)]}px`,transform: `rotate(${Math.floor(Math.random() * 90) - Math.floor(Math.random() * 90)}deg)`,})}// 指向this.codeList = codeList// 将当前数据派发出去this.$emit('update:value', 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>
.ValidCodeContent {display: flex;flex-direction: row;justify-content: center;margin-left: 20px;
}
.ValidCode {display: flex;justify-content: center;align-items: center;cursor: pointer;background: #eaeaea;
}.ValidCode > span {display: inline-block;
}.kbq {width: 60px;height: 40px;line-height: 40px;/* color: #002082; */color: #ed7610;margin-left: 10px;cursor: pointer;font-size: 16px;font-family: simhei;
}
</style>

2. 登录页 login.vue

<template><div id="loginPage" class="subpage applogin" :style="getStyle()"><el-form ref="LoginData" :model="loginData" label-width="0px" style="padding-top: 35px;width:90%;margin-left: auto;margin-right: auto;" class="loginForm"><el-form-item><el-input :input-style="{ height: '40px !important', lineHeight: '50px',color:'#333' }" type="text" v-model="loginData.userName"autocomplete="off" placeholder="请输入用户名" class="username"  /></el-form-item><el-form-item><el-input :input-style="{ height: '40px !important', lineHeight: '50px',color:'#333' }" class="password" type="password"v-model="loginData.password" autocomplete="off" placeholder="请输入密码" show-password  /></el-form-item><el-form-item prop="validCode" style="display: flex"><div style="display: flex"><div class="loginBodyItem validCode"><div></div><el-input :input-style="{ height: '40px !important', lineHeight: '50px',color:'#333' }" type="text" v-model="inputValidCode"autocomplete="off" placeholder="请输入验证码" class="valid"  /></div><ValidCode class="validCode" v-model:value="validCode"></ValidCode></div></el-form-item><el-form-item><el-button style="background:#0147eb !important;" color="#0147eb" @click="login" dark="true" v-preventReClick>登&nbsp;&nbsp;录</el-button></el-form-item></el-form></div>
</template>
<script>import ValidCode from './ValidCode.vue';
export default {data: function() {return {validCode: '',inputValidCode: '',loginData: {"userName": "","password": ""},}},methods:{login: async function() {let data = JSON.parse(JSON.stringify(this.loginData));if (!data.userName) {this.$message({type: "warning",message: "请输入用户名"});return;}if (!data.password) {this.$message({type: "warning",message: "请输入密码"});return;}if (this.inputValidCode.toLocaleLowerCase() == '') {this.$message({type: "warning",message: "请输入验证码"});return} else {if ( this.inputValidCode.toLocaleLowerCase() !==  this.validCode.toLocaleLowerCase() ) {this.$message({type: "warning",message: "验证码输入有误"});return} else {}}let res = await FrameWork.SendGet(url, formData);....}},components: {ValidCode}}
</script>
<style scoped="scoped">/deep/.validCode {float: left;margin-top: 10px;}
</style>