vue+elementui搭建後臺管理介面(4使用font-awesome)
阿新 • • 發佈:2018-11-19
使用font-awesome
npm install --save font-awesome
修改 src/main.js 增加
import 'font-awesome/scss/font-awesome.scss'
1 login頁面增加圖示
效果如下
修改原來的使用者輸入框
<template slot="prepend"><span class="fa fa-user fa-lg" style="width: 13px"></span></template>
和密碼輸入框
<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"></span></template>
給"眼睛"增加click事件
/** ... */
pwdType: 'password',
eyeType: 'fa fa-eye-slash fa-lg'
/** ... */
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'
}
}
2 簡單實現記住密碼
成功登陸後把使用者名稱和密碼存入cookie,再次進入頁面時讀取cookie
/** ... */ 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}` }, 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.ruleForm2.username = arr2[1] }else if(arr2[0] === 'C-password'){ this.ruleForm2.password = arr2[1] this.rememberme = true } } } }, // 修改為空,天數為-1 deleteCookie(){ this.setCookie('', '', -1); } /** ... */ // 登陸成功 儲存帳號密碼 if(this.rememberme){ this.setCookie(this.ruleForm2.username, this.ruleForm2.password, 7) }else{ this.deleteCookie() } /** ... */ // 頁面載入後讀取cookie mounted(){ this.getCookie() }