本文实例为大家分享了vue+element实现输入密码锁屏的具体代码,供大家参考,具体内容如下
1.页面中个的点击事件
通过vuex来存在状态
/** * 锁屏功能 */ lock() { console.log('锁屏') const that = this this.$prompt('请输入锁屏密码', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', inputPattern: /\S/, //判断不为空正则 inputErrorMessage: '锁屏密码不能为空' }).then(({ value }) => { that.isLock = !that.isLock that.$store.commit('SET_LOCK_PASSWD', value) that.elementTips("success", "锁屏成功"); this.handleLock() }).catch(() => { that.elementTips("info", "锁屏失败"); }); }, //判断输入框是否有内容,有内容就跳转,设置状态 handleLock() { const that = this if (util.validatenull(this.lockPasswd)) { this.box = true return } 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 = true util.setStore('isLock', state.isLock) // console.log('util.setStore',util.getStore('isLock')) }, SET_LOCK_PASSWD(state, lockPasswd) { state.lockPasswd = lockPasswd util.setStore('lockPasswd', state.lockPasswd) // console.log('util.setStore',util.getStore('lockPasswd')) }, CLEAR_LOCK(state, action) { state.isLock = false state.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_token util.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 = true setTimeout(() => { this.passwdError = false }, 1000) return } this.pass = true setTimeout(() => { //输入密码正确后删除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.path console.log('toPath:', toPath) console.log('在白名单中:', whiteList.indexOf(toPath)); console.log('user_token:', user_token) document.body.scrollTop = 0 // firefox document.documentElement.scrollTop = 0 // safari window.pageYOffset = 0 if (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' }) } });
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持阿兔在线工具。