This article has shared with you the specific code of the vue+element input password lock screen for your reference. The specific content is as follows
1. Click events on the page
Existing state through vuex
/**
* Lock screen function
*/
lock() {
('Lock screen')
const that = this
this.$prompt('Please enter the lock screen password', 'hint', {
confirmButtonText: 'Sure',
cancelButtonText: 'Cancel',
inputPattern: /\S/, //Judge that it is not empty and regular inputErrorMessage: 'The lock screen password cannot be empty'
}).then(({
value
}) => {
= !
that.$('SET_LOCK_PASSWD', value)
("success", "Lock screen successfully");
()
}).catch(() => {
("info", "Lock screen failed");
});
},
//Distinguish whether there is content in the input box. If there is content, jump and set the status handleLock() {
const that = this
if (()) {
= true
return
}
that.$('SET_LOCK')
setTimeout(() => {
('/lock')
}, 100)
},2. Set status in vuex
import util from '@/utils'
import store from '../'
import cookie from '@/utils/'
const mutations = {
SET_IM(state, userInfo) {
('user:', userInfo)
= userInfo
},
SET_LOCK(state, action) {
= true
('isLock', )
// ('',('isLock'))
},
SET_LOCK_PASSWD(state, lockPasswd) {
= lockPasswd
('lockPasswd', )
// ('',('lockPasswd'))
},
CLEAR_LOCK(state, action) {
= false
= ''
('lockPasswd')
('isLock')
// ('',)
},
}
export default mutations
/**
*
* @author getters
*/
const getters = {
isLock: state => ,
lockPasswd: state => ,
}
export default getters
/**
* @desc Status Table
* @author Vman
* @time 2019/9/6
*/
import {
getStore
} from '@/utils'
export default {
userInfo: {},
//im instance nim: null,
name: '',
isLock: false,
lockPasswd: '',
userUID: '',
sdktoken: '',
}3. Unlock the page
<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="Please enter your login password" type="password" class="input-with-select animated" v-model="passwd"
@="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 =>
}),
...mapGetters(['tag', 'lockPasswd'])
},
props: [],
methods: {
handleLogout() {
this.$confirm('Do you exit the system, and continue?', 'hint', {
confirmButtonText: 'Sure',
cancelButtonText: 'Cancel',
type: 'warning'
}).then(() => {
//Delete the vuex status table this.$('CLEAR_LOCK')
//Delete user_token ('user_token')
this.$({
path: '/login'
})
('555')
}).catch(() => {
return false
})
},
handleLogin() {
('', )
if ( !== ) {
= ''
this.$message({
message: 'Unlock password is wrong, please re-enter',
type: 'error'
})
= true
setTimeout(() => {
= false
}, 1000)
return
}
= true
setTimeout(() => {
//Delete the status value in vuex after entering the password correctly this.$('CLEAR_LOCK')
this.$(-1); //Return to the previous level }, 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/");
background-size: cover;
}
.lock-form {
width: 300px;
}
</style>4. Utilize routing hook functions in routing
import Vue from 'vue'
import Router from 'vue-router'
import util from '@/utils'
import store from '@/store'
((to, form, next) => {
let user_token = ('user_token');
let toPath =
('toPath:', toPath)
('On the whitelist:', (toPath));
('user_token:', user_token)
= 0
// firefox
= 0
// safari
= 0
if ((toPath) == -1 && (!user_token && user_token !== undefined && user_token != null)) {
//Not on the whitelist and user_token does not ({
path: '/login'
})
} else if ((toPath) != -1) {
//Go to the login page // ('user_token')
next();
} else if ((toPath) == -1 && user_token) {
//Not on the whitelist, and user_token exists next()
}
/**
* Judge lock screen
*/
if ( && !== '/lock') {
next({
path: '/lock'
})
}
});The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.