本文实例为大家分享了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.webp");
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'
})
}
});
