使用font-awesome
npm install --save font-awesome
修改 src/main.js 增加
import 'font-awesome/scss/font-awesome.scss'
1 login页面增加图标
<template>
<div class="login-container">
<el-form :model="myForm" :rules="myRule"
status-icon
ref="myForm"
label-position="left"
label-width="0px"
class="demo-ruleForm login-page">
<h3 class="title">登录</h3>
<el-form-item prop="username">
<el-input type="text"
v-model="myForm.username"
auto-complete="off"
placeholder="用户名"
>
<template slot="prepend">
<span class="fa fa-user fa-lg" style="width: 13px"></span>
</template>
</el-input>
</el-form-item>
<el-form-item prop="password">
<el-input :type="pwdType"
v-model="myForm.password"
auto-complete="off"
placeholder="密码"
>
<template slot="prepend">
<span class="fa fa-lock fa-lg"
style="width: 13px"></span>
</template>
<template slot="suffix">
<span class="password-eye"
@click="showPassword"
:class="eyeType"
style="width: 13px"></span>
</template>
</el-input>
</el-form-item>
<el-checkbox v-model="rememberme" class="rememberme">记住密码</el-checkbox>
<el-form-item style="width:100%;">
<el-button type="primary" style="width:100%;" @click="handleSubmit" :loading="logining">登录</el-button>
</el-form-item>
</el-form>
</div>
</template>
修改样式
<style lang="scss" scoped>
.login-container {
width: 100%;
height: 100%;
}
.login-page {
-webkit-border-radius: 5px;
border-radius: 5px;
margin: 180px auto;
width: 350px;
padding: 35px 35px 15px;
background: #fff;
border: 1px solid #eaeaea;
box-shadow: 0 0 25px #cac6c6;
.password-eye {
position: absolute;
right: 20px;
top: 11px;
cursor: pointer;
}
}
label.el-checkbox.rememberme {
margin: 0px 0px 15px;
text-align: left;
}
</style>
效果如下
image
给"眼睛"增加click事件
<script>
export default {
data(){
return {
logining: false,
myForm: {
username: '',
password: '',
},
myRule: {
username: [{ required: true, message: 'please enter your account', trigger: 'blur' }],
password: [{ required: true, message: 'enter your password', trigger: 'blur' }]
},
rememberme: false,
pwdType: 'password',
eyeType: 'fa fa-eye-slash fa-lg',
}
},
methods: {
showPassword() {
if (this.pwdType === 'password') {
this.pwdType = ''
this.eyeType = 'fa fa-eye fa-lg'
} else {
this.pwdType = 'password'
this.eyeType = 'fa fa-eye-slash fa-lg'
}
},
handleSubmit () {
this.$refs.myForm.validate((valid) => {
if (valid) {
this.logining = true;
if (this.myForm.username === 'admin' && this.myForm.password === '123456') {
this.logining = false;
sessionStorage.setItem('user', this.myForm.username);
this.$router.push({path: '/'});
}else{
this.logining = false;
this.$alert('账号或密码错误', '温馨提示', {
confirmButtonText: '确定'
})
}
}else{
console.log('error submit!');
return false;
}
})
}
}
};
</script>
2 简单实现记住密码
成功登陆后把用户名和密码存入cookie，再次进入页面时读取cookie
<script>
export default {
data(){
return {
logining: false,
myForm: {
username: '',
password: '',
},
myRule: {
username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
},
rememberme: false,
pwdType: 'password',
eyeType: 'fa fa-eye-slash fa-lg',
redirect: undefined,
}
},
methods: {
showPassword() {
if (this.pwdType === 'password') {
this.pwdType = ''
this.eyeType = 'fa fa-eye fa-lg'
} else {
this.pwdType = 'password'
this.eyeType = 'fa fa-eye-slash fa-lg'
}
},
handleSubmit () {
this.$refs.myForm.validate((valid) => {
if (valid) {
this.logining = true;
if (this.myForm.username === 'admin' && this.myForm.password === '123456') {
this.logining = false;
//sessionStorage.setItem('user', this.myForm.username);
if(this.rememberme){
//console.log(this.myForm.password)
this.setCookie(this.myForm.username, this.myForm.password, 7)
}else{
this.clearCookie()
}
this.$router.push({path: '/'});
}else{
this.logining = false;
this.$alert('账号或密码错误', '温馨提示', {
confirmButtonText: '确定'
})
}
}else{
console.log('error submit!');
return false;
}
})
},
setCookie(name, pass, days){
let expire = new Date()
expire.setDate(expire.getDate() + days)
document.cookie = `C-username=${name};expires=${expire}`
document.cookie = `C-password=${pass};expires=${expire}`
},
clearCookie(){
this.setCookie('', '', -1)
},
getCookie(){
if(document.cookie.length){
let arr = document.cookie.split('; ')
for(let i=0; i<arr.length; i++){
let arr2 = arr[i].split('=')
if(arr2[0] === 'C-username'){
this.myForm.username = arr2[1]
}else if(arr2[0] === 'C-password'){
this.myForm.password = arr2[1]
this.rememberme = true
}
}
}
},
},
mounted(){
this.getCookie()
}
};
</script>
注意修改之前写在main.js里面的路由导航守卫，先将其隐藏，后期再处理
import Vue from 'vue'
import App from './App'
import store from './store'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import './assets/css/index.scss'
import 'font-awesome/scss/font-awesome.scss'
Vue.use(ElementUI)
Vue.config.productionTip = false
// router.beforeEach((to, from, next) => {
// if (to.path === '/login') {
// sessionStorage.removeItem('user')
// }
// var user = sessionStorage.getItem('user')
// if (!user && to.path !== '/login') {
// next({
// path: '/login'
// })
// } else {
// next()
// }
// })
new Vue({
el: '#app',
store,
router,
render: h => h(App)
})
文章改编自大神博客：https://www.cnblogs.com/wbjxxzx/p/9975933.html，仅作为学习实践。
网友评论