vue + element 输入密码锁屏

1.页面中个的点击事件
通过vuex来存在状态

 /*** 锁屏功能*/lock() {console.log('锁屏')const that = thisthis.$prompt('请输入锁屏密码', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',inputPattern: /\S/,        //判断不为空正则inputErrorMessage: '锁屏密码不能为空'}).then(({value}) => {that.isLock = !that.isLockthat.$store.commit('SET_LOCK_PASSWD', value)that.elementTips("success", "锁屏成功");this.handleLock()}).catch(() => {that.elementTips("info", "锁屏失败");});},//判断输入框是否有内容，有内容就跳转，设置状态handleLock() {const that = thisif (util.validatenull(this.lockPasswd)) {this.box = truereturn}that.$store.commit('SET_LOCK')setTimeout(() => {that.go('/lock')}, 100)},

2.在vuex中设置状态

import util from '@/utils'
import store from '../'
import cookie from '@/utils/cookie.js'
const mutations = {SET_IM(state, userInfo) {console.log('user:', userInfo)state.userInfo = userInfo},SET_LOCK(state, action) {state.isLock = trueutil.setStore('isLock', state.isLock)// console.log('util.setStore',util.getStore('isLock'))},SET_LOCK_PASSWD(state, lockPasswd) {state.lockPasswd = lockPasswdutil.setStore('lockPasswd', state.lockPasswd)// console.log('util.setStore',util.getStore('lockPasswd'))},CLEAR_LOCK(state, action) {state.isLock = falsestate.lockPasswd = ''util.removeStore('lockPasswd')util.removeStore('isLock')// console.log('state.isLock',state.isLock)},}
export default mutations/*** * @author getters */
const getters = {isLock: state => state.isLock,lockPasswd: state => state.lockPasswd,
}
export default getters/*** @desc 状态表* @author Vman * @time 2019/9/6*/
import {getStore
} from '@/utils'
export default {userInfo: {},//im 实例nim: null,name: '',isLock: false,lockPasswd: '',userUID: '',sdktoken: '',
}

3.解锁页面

<template><div class="lock-container pull-height"><div class="lock-form animated bounceInDown"><div class="animated" :class="{'shake':passwdError,'bounceOut':pass}"><h3 class="text-white">{{name}}</h3><el-input placeholder="请输入登录密码" type="password" class="input-with-select animated" v-model="passwd"@keyup.enter.native="handleLogin"><!-- <el-button slot="append" @click="handleLogin" style="padding-right:36px;"><svg-icon  class-name='international-icon' icon-class="deblocking"/></el-button> --><!-- <el-button slot="append" @click="handleLogout"><svg-icon class-name='international-icon' icon-class="lockOut"/></el-button> --><el-button slot="append" @click="handleLogin" style="padding-right:36px;"><i class="el-icon-unlock"></i></el-button><el-button slot="append" @click="handleLogout"><i class="el-icon-switch-button"></i></el-button></el-input></div></div></div>
</template>
<script>import util from '@/utils'import {mapGetters,mapState} from 'vuex'export default {name: 'lock',data() {return {passwd: '',passwdError: false,pass: false}},created() {},mounted() {},computed: {...mapState({name: state => state.name}),...mapGetters(['tag', 'lockPasswd'])},props: [],methods: {handleLogout() {this.$confirm('是否退出系统, 是否继续?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {//删除vuex状态表this.$store.commit('CLEAR_LOCK')//删除user_tokenutil.removeStore('user_token')this.$router.push({path: '/login'})console.log('555')}).catch(() => {return false})},handleLogin() {console.log('this.lockPasswd', this.lockPasswd)if (this.passwd !== this.lockPasswd) {this.passwd = ''this.$message({message: '解锁密码错误,请重新输入',type: 'error'})this.passwdError = truesetTimeout(() => {this.passwdError = false}, 1000)return}this.pass = truesetTimeout(() => {//输入密码正确后删除vuex中状态值this.$store.commit('CLEAR_LOCK')this.$router.go(-1); //返回上一层}, 1000)}},components: {}}
</script><style lang="scss">.lock-container {height: 100%;display: flex;align-items: center;justify-content: center;position: relative;}.lock-container::before {z-index: -999;content: "";position: absolute;left: 0;top: 0;width: 100%;height: 100%;background-image: url("../../assets/images/lockLogin.png");background-size: cover;}.lock-form {width: 300px;}
</style>

4.在路由中利用路由钩子函数

import Vue from 'vue'
import Router from 'vue-router'
import util from '@/utils'
import store from '@/store'router.beforeEach((to, form, next) => {let user_token = util.getStore('user_token');let toPath = to.pathconsole.log('toPath:', toPath)console.log('在白名单中:', whiteList.indexOf(toPath));console.log('user_token:', user_token)document.body.scrollTop = 0// firefoxdocument.documentElement.scrollTop = 0// safariwindow.pageYOffset = 0if (whiteList.indexOf(toPath) == -1 && (!user_token && user_token !== undefined && user_token != null)) {//不在白名单，并且user_token没有router.push({path: '/login'})} else if (whiteList.indexOf(toPath) != -1) {//去登录页// util.removeStore('user_token')next();} else if (whiteList.indexOf(toPath) == -1 && user_token) {//不在白名单，并且user_token存在next()}/*** 判断锁屏*/if (store.getters.isLock && to.path !== '/lock') {next({path: '/lock'})}
});

vue + element 输入密码锁屏相关推荐

vue+element 输入的大于等于0
<el-inputv-model="updateForm.exchangeUp" onkeyup="this.value=this.value.replace(/[ ...
vue+element实现银行卡号只输入数字，四个补一个空位，并实现校验
vue+element实现银行卡号只输入数字,四个补一个空位,并实现校验 html 输入框只输入数字 watch 监听实现四个数字补一个空位自定义卡号校验规则 html 输入框只输入数字 // ty ...
vue+iview4.0 , vue+element实现下拉框可以自定义输入内容
前言: 最近10月的时候 iview4.0 更新了,但是一直在忙也没用到,正好因为要实现一个下拉框里面我要自定义输入内容的效果,element里面是有这个效果,antd里面没有,因为本项目用的ivie ...
vue+element ui 设置页面全屏全屏和退出全屏的切换
vue+element ui 设置页面全屏全屏和退出全屏的切换方式1 screenfull 插件 // 属性 screenfull.isFullscreen; // 判断当前页是否全屏返回类型 ...
Vue+element登录页面实现拼图验证
Vue+element登录页面实现拼图验证需求分析一.导入二.验证的意义三.常规验证手段详细设计一.使用组件二.轮子已找好,开始拼凑效果展示结尾需求分析一.导入项目开发过程中, ...
vue + element ui 的后台管理系统框架_从零开始搭建 VUE + Element UI后台管理系统框架...
点击右上方红色按钮关注"web秀",让你真正秀起来前言后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条号.百家号等 ...
vue element项目常见实现表格内部可编辑功能
目录前言正文 1.简单表格行内内部可编辑 2. 数据从后端取得表格行内可编辑 3.批量表格整体的可编辑结语前言后台系统都是各种表格表单编辑,整理了下常见的几种实现表格编辑的方式,希望有用.使 ...
【Vue 快速入门】从零开始搭建 VUE + Element UI后台管理系统框架
[Vue 快速入门]从零开始搭建 VUE + Element UI后台管理系统框架前言后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条 ...
Vue+Element动态生成新表单并添加验证
Vue+Element动态生成新表单并添加验证首先,有这样一个需求,表单中默认有表单项,点击新增,会多出一项. 点击之后官方文档中有写用v-for来实现新增表单,但是那是单表单的新增,现在多表单的 ...

vue + element 输入密码锁屏

vue + element 输入密码锁屏相关推荐

最新文章

热门文章