element-vue实现网页锁屏功能

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

    
        
            
                
            
            

                
                    
                
            
        
        

            确 定
        
    

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

//用户信息
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()
                }
            }

        }
    })