登录页添加验证码

登录页添加验证码

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

<template>
  <div class="ValidCodeContent" style="">
    <div
      class="ValidCode disabled-select"
      :style="`width:${width}; height:${height}`"
      @click="refreshCode"
    >
      <span
        v-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>