当前位置：首页 > news >正文

element-vue实现网页锁屏功能

news 来源：原创 2024/5/20 8:26:20

1.写一个锁屏页面，这里比较简单，自己定义一下,需要放到底层HTML中哦，比如index.html

<div id="appIndex"><el-dialog title="请输入密码解锁屏幕" :visible.sync="lockScreenFlag" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false" :append-to-body="true"width="500px" center><el-form :model="form" :rules="rules" ref="form"><el-form-item label="用户名" prop="loginName"><el-input v-model="form.loginName" autocomplete="off" :disabled="true" prefix-icon="el-icon-user-solid"></el-input></el-form-item><el-form-item label="密码" prop="password">
<!--                <el-input type="password" v-model="form.password" autocomplete="off" prefix-icon="el-icon-lock"></el-input>--><el-input prefix-icon="el-icon-lock" placeholder="请输入密码" :type="inputType?'text':'password'" v-model="form.password"><i slot="suffix" :class="inputType?'el-icon-minus':'el-icon-view'" style="margin-top:8px;font-size:18px;" autocomplete="auto" @click="inputType=!inputType"></i></el-input></el-form-item></el-form><div slot="footer" class="dialog-footer" style="text-align: right; padding-right: 5px;"><el-button type="primary" @click="submitPassword" size="small">确 定</el-button></div></el-dialog>
</div>

2.里面需要结合Vue双向绑定的成分

//用户信息
let user = [[${user}]]
//过期事件，let lockScreenTime = 30let app = new Vue({el: '#appIndex',data: function () {var passwordSuccess = (rule, value, callback) => {request.post(ctx+"system/user/checkLoginNameAndPassword",Qs.stringify(this.form)).then(res=>{if (res.data == 0){callback();}else if (res.data == 1){callback(new Error("输入的密码错误或输入了非法用户名"));}else {callback(new Error(res.data.msg));}})}return {lockScreenFlag: false,timer: undefined,time: parseFloat(lockScreenTime)*1000*60,form:{loginName:user.loginName,password: '',},inputType: false,rules: {password: [{required: true, message: '请输入用户名密码', trigger: 'blur'},{validator: passwordSuccess, trigger: 'blur'},],},}},created: function () {if (window.localStorage.getItem("lockScreenFlag")!=undefined){let lockScreenFlag = window.localStorage.getItem("lockScreenFlag");if (lockScreenFlag == '0'){this.lockScreenFlag = false;$("#wrapper").css("pointer-events","auto")}else {$("#wrapper").css("pointer-events","none")this.lockScreenFlag = true;}}this.move();},mounted(){let _this = this;window.document.onmousemove = function () {_this.move();}window.move = this.move;window.openScreen = this.openScreen;},methods: {submitPassword(){this.$refs['form'].validate((valid) => {if (valid) {this.lockScreenFlag = false;$("#wrapper").css("pointer-events","auto")window.localStorage.setItem("lockScreenFlag",'0')}})},lockScreen(){window.clearTimeout(this.timer)this.timer = window.setTimeout(this.openScreen,this.time)},openScreen(){if (!this.lockScreenFlag){this.lockScreenFlag = true;$("#wrapper").css("pointer-events","none")window.localStorage.setItem("lockScreenFlag",'1')}},move(){if (!this.lockScreenFlag){this.lockScreen()}}}})