element-vue实现网页锁屏功能

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

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双向绑定的成分

javascript 复制代码

//用户信息
let user = [[${user}]]
//过期事件，
    let lockScreenTime = 30
    let 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()
                }
            }

        }
    })