实现效果
// template<el-form :model="loginForm" :rules="fieldRules" ref="loginForm" label-position="left" label-width="0px" class="login-container"> <span class="tool-bar"></span> <h2 class="title">用户登陆</h2> <el-form-item prop="account"> <el-input type="text" v-model.trim="loginForm.account" auto-complete="false" placeholder="账号"></el-input> </el-form-item> <el-form-item prop="password" class="item-m10"> <el-input type="password" v-model.trim="loginForm.password" auto-complete="false" placeholder="密码"></el-input> </el-form-item> <el-form-item prop="code" align="left" style="margin-top: 20px"> <el-input v-model="loginForm.code" style="width: 170px" placeholder="验证码，点击图片刷新"></el-input> <el-tag class="login-tag-code" @click="getCode">{{ viewCode }}</el-tag> </el-form-item> <div class="checked-item"> <el-checkbox v-model="checked">记住密码</el-checkbox> </div> <el-form-item style="width: 100%" class="btn-item"> <el-button style="width: 100%" @click.native.prevent="loginSubmit" :loading="loading">登录</el-button> </el-form-item>// js// ---------分割线 data () { return { viewCode: '', loginForm: { account: '', password: '', src: '', code: '' }, fieldRules: { account: [{ required: true, message: '请输入账号', trigger: 'blur' }], password: [{ required: true, message: '请输入密码', trigger: 'blur' }] }, checked: false, // 加载中的标志 loading: false } },// ------ 分割线 methods: { loginSubmit () { if (!this.loginForm.account || !this.loginForm.password) { this.$message.error('账号或密码不能为空！') return } if (!this.loginForm.code || this.loginForm.code !== this.viewCode) { this.$message.error('验证码不正确！') return } this.loading = true let userInfo = { account: this.loginForm.account, password: this.loginForm.password } //登陆接口 this.$api.login .login(userInfo) .then((res) => { if (this.checked) { let rememberInfo = JSON.stringify({ ...userInfo }) localStorage.setItem('rememberInfo', rememberInfo) // 记住密码时 保存login } else { localStorage.removeItem('rememberInfo') } this.$router.push('/') // 登录成功，跳转到主页 this.loading = false }) .catch((err) => { this.$message({ message: err.message, type: 'error' }) }) }, //获取验证码 getCode () { this.viewCode = '' let codeString = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ' let codeArray = codeString.split('') let num = codeArray.length let newCodeArray = [] for (let i = 0; i < 5; i++) { let index = Math.floor(Math.random() * num) newCodeArray.push(codeArray[index]) } this.viewCode = newCodeArray.join('') }, }, mounted () { this.getCode() if (localStorage.getItem('rememberInfo')) { // 有上次登录信息 显示上次登录 let rememberData = JSON.parse(localStorage.getItem('rememberInfo')) const { account, password } = rememberData this.loginForm.account = account this.loginForm.password = password } }样式代码省略。。。
