使用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()
}

vue+elementui搭建后台管理界面(4使用font-awesome)的更多相关文章

  1. vue+elementui搭建后台管理界面(7 vuex和mockjs的使用)

    将权限管理应用到系统,首先做好登录, 点击登录按钮后,触发以下动作 vuex 中的 login 动作,设置 cookie vuex 中的 getuserinfo , 获取权限.用户名.头像等 由于目前 ...

  2. vue+elementui搭建后台管理界面(2首页)

    1 会话存储 使用html5的 sessionStorage 对象临时保存会话 // 保存会话 sessionStorage.setItem('user', username) // 删除会话 ses ...

  3. vue+elementui搭建后台管理界面

    1 会话存储 使用html5的 sessionStorage 对象临时保存会话 // 保存会话 sessionStorage.setItem('user', username) // 删除会话 ses ...

  4. vue+elementui搭建后台管理界面(1登录)

    1 node环境安装 从 node官网下载安装包 2 vue-cli npm install vue-cli -g 3 新建项目 vue init webpack vue-project 可保持默认, ...

  5. vue+elementui搭建后台管理界面(8 同步/异步获取数据渲染table)

    elementui已经封装好了 el-table 组件,只需要指定 data 数据源即可,因此通常在 vue 实例生命周期的 created 阶段,从数据库获取数据,再将返回的数据绑定到 data 如 ...

  6. vue+elementui搭建后台管理界面(6登录和菜单权限控制)

    不同的权限对应不同的路由(菜单),同时侧边栏也根据权限异步生成,实现登录和鉴权思路如下: 登录:点击登录,服务器验证通过后返回一个 token ,然后存到 cookie,再根据 token 拉取用户权 ...

  7. vue+elementui搭建后台管理界面(5递归生成侧栏路由)

    有一个菜单树,顶层菜单下面有多个子菜单,子菜单下还有子菜单... 这时候就要用递归处理 1 定义多级菜单 修改 src/router/index.js 的 / 路由 { path: '/', redi ...

  8. vue+elementui搭建后台管理界面(3侧边栏菜单)

    上一节搭好了主框架,但是标签页和侧边栏只是分别展示了各自的菜单,如何将二者联动起来? 定义路由规则:当有 children 属性时,从 children 里取出 path 填充到侧边栏,如: { pa ...

  9. vue+elementui搭建后台管理界面(6登录和菜单权限控制[二])

    根据权限计算路由的代码 /** * 通过meta.role判断是否与当前用户权限匹配 * @param roles * @param route */ function hasRoles (roles ...

随机推荐

  1. UIAlertController 修改文字显示实现方法

    UIAlertController修改文字显示 不废话先上完整代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 UIAlertControll ...

  2. curl 获取状态返回码

    [root@1708mode ~]# curl -o /dev/null -s -w "%{http_code}\n" baidu.com200 朋友问,就有了 wget 没学会& ...

  3. Python学习日记(十四) 正则表达式和re模块

    正则表达式: 它是字符串的一种匹配模式,用来处理字符串,可以极大地减轻处理一些复杂字符串的代码量 字符组:它是在同一位置可能出现的各种字符组成了一个字符组,用[]表示,但是它的结果只能是一个数字或者一 ...

  4. svn忘记密码怎么办?如何获取svn账号和密码?

    SVN作为一种开放源代码的集中式版本控制系统,一直以来都深受所有公司的喜爱.伴随着它使用范围的广泛,一系列问题也随之接踵而至. 我们今天就来谈谈比较常见的但一般除了一个人干着急没办法解决的问题,那就是 ...

  5. 1、uiautomator2常用语法

    uiautomator2常用语法 连接设备 使用USB连接: d=u2.connect_USB('148b4090')输入手机序列号 d是给当前连接设备定位一个变量 获取设备的信息: print(d. ...

  6. 基于Java的支持可变QPS的http负载生成器,提供交互界面和RMI接口

    Load generator The load generator is a Java maven project which is implemented using httpclient+thre ...

  7. js中绑定事件处理函数,使用event以及传递额外数据

    IE8中使用attachEvent绑定事件处理函数时,不能直接向event 对象添加数据属性.可以用属性复制的方法,包装新的event对象. 1. 属性复制var ObjectExtend = fun ...

  8. react native jpush

    原文链接:https://blog.csdn.net/qq_38719039/article/details/80684144 1 npm install jpush-react-native --s ...

  9. [牛客网 -leetcode在线编程 -02] minimum-depth-of-binary-tree -树的最短深度

    题目描述 题目描述 Given a binary tree, find its minimum depth.The minimum depth is the number of nodes along ...

  10. 《少年先疯队》第八次团队作业:Alpha冲刺第四天

    前言    第四天冲刺会议    时间:2019.6.17    地点:宿舍 4.1 今日完成任务情况以及遇到的问题.   4.1.1今日完成任务情况 姚玉婷:管理员功能模块中,收费管理功能的实现. ...