vue+element實(shí)現(xiàn)輸入密碼鎖屏

更新時間：2022年03月07日 13:58:36 作者：小聰聰???

這篇文章主要為大家詳細(xì)介紹了vue+element實(shí)現(xiàn)輸入密碼鎖屏，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了vue+element實(shí)現(xiàn)輸入密碼鎖屏的具體代碼，供大家參考，具體內(nèi)容如下

1.頁面中個的點(diǎn)擊事件

通過vuex來存在狀態(tài)

/**
? * 鎖屏功能
? */
?? ??? ??? ?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", "鎖屏失敗");
?? ??? ??? ??? ?});
?? ??? ??? ?},
?? ??? ??? ?//判斷輸入框是否有內(nèi)容，有內(nèi)容就跳轉(zhuǎn)，設(shè)置狀態(tài)
?? ??? ??? ?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中設(shè)置狀態(tài)

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 狀態(tài)表
?* @author Vman?
?* @time 2019/9/6
?*/
import {
?? ?getStore
} from '@/utils'
export default {
?? ?userInfo: {},
?? ?//im 實(shí)例
?? ?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('是否退出系統(tǒng), 是否繼續(xù)?', '提示', {
?? ??? ??? ??? ??? ?confirmButtonText: '確定',
?? ??? ??? ??? ??? ?cancelButtonText: '取消',
?? ??? ??? ??? ??? ?type: 'warning'
?? ??? ??? ??? ?}).then(() => {
?? ??? ??? ??? ??? ?//刪除vuex狀態(tài)表
?? ??? ??? ??? ??? ?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中狀態(tài)值
?? ??? ??? ??? ??? ?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.在路由中利用路由鉤子函數(shù)

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'
?? ??? ?})
?? ?}
});

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: