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()}}}})