登录验证码

登录验证码样式

js部分

html代码

// 
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px" class="ms-content">
					<el-form-item prop="username">
						<el-input v-model="ruleForm.username" placeholder="username">
							<i slot="prefix" class="el-input__icon el-icon-lock"></i>
						</el-input>
					</el-form-item>
					<el-form-item prop="password">
						<el-input type="password" placeholder="password" v-model="ruleForm.password" @keyup.enter.native="submitForm('ruleForm')">
							<i slot="prefix" class="el-input__icon el-icon-lock"></i>
						</el-input>
					</el-form-item>
					<el-form-item prop="sidentify">
						<el-input placeholder="sidentify" v-model="ruleForm.sidentify">
							<i slot="prefix" class="el-input__icon el-icon-lock"></i>
							<div slot="suffix" style="width: 100px;height: 38px; border-radius: 50px;" @click="generatedCode">{{code ? code : '点击获取'}}</div>
						</el-input>
					</el-form-item>
					<div class="login-btn">
						<el-button type="primary" round @click="onSubmit">登录</el-button>
					</div>
				</el-form>

js代码

//
 generatedCode() {
				const random = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N',
					'O', 'P', 'Q', 'R',
					'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
				]
				let code = ''
				for (let i = 0; i < 4; i++) {
					let index = Math.floor(Math.random() * 36)
					code += random[index]
				}
				console.log(code)
				this.code = code

			},

效果图