70 lines
2.2 KiB
Vue
70 lines
2.2 KiB
Vue
|
<template>
|
||
|
|
<div @click="lockScreen"
|
||
|
|
style="cursor:pointer;">
|
||
|
|
<i class="iconfont iconsuopingmima"
|
||
|
|
v-show="false"
|
||
|
|
@click="lockScreen"
|
||
|
|
style="cursor: pointer;color:white"></i>
|
||
|
|
<span style="font-size:14px;color:white;margin-left:5px" v-show="false">锁屏</span>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import Cookies from 'js-cookie';
|
||
|
|
const setLockBackSize = () => {
|
||
|
|
let x = document.body.clientWidth;
|
||
|
|
let y = document.body.clientHeight;
|
||
|
|
let r = Math.sqrt(x * x + y * y);
|
||
|
|
return parseInt(r);
|
||
|
|
};
|
||
|
|
export default {
|
||
|
|
name: 'lockScreen',
|
||
|
|
props: {
|
||
|
|
value: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
lockScreen () {
|
||
|
|
let lockScreenBack = document.getElementById('lock_screen_back');
|
||
|
|
lockScreenBack.style.transition = 'all 3s';
|
||
|
|
lockScreenBack.style.zIndex = 10000;
|
||
|
|
lockScreenBack.style.boxShadow = '0 0 0 ' + this.lockScreenSize + 'px rgb(16, 22, 44) inset';
|
||
|
|
this.showUnlock = true;
|
||
|
|
Cookies.set('pageRoute', this.$route.path); // 本地存储锁屏之前打开的页面以便解锁后打开
|
||
|
|
setTimeout(() => {
|
||
|
|
lockScreenBack.style.transition = 'all 0s';
|
||
|
|
this.$router.push({
|
||
|
|
name: 'locking'
|
||
|
|
});
|
||
|
|
}, 800);
|
||
|
|
Cookies.set('locking', '1');
|
||
|
|
this.$emit('clearTime')
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted () {
|
||
|
|
let lockScreenBack;
|
||
|
|
if (!document.getElementById('lock_screen_back')) {
|
||
|
|
let lockdiv = document.createElement('div');
|
||
|
|
lockdiv.setAttribute('id', 'lock_screen_back');
|
||
|
|
lockdiv.setAttribute('class', 'lock-screen-back');
|
||
|
|
document.body.appendChild(lockdiv);
|
||
|
|
lockScreenBack = document.getElementById('lock_screen_back');
|
||
|
|
window.addEventListener('resize', () => {
|
||
|
|
let size = setLockBackSize();
|
||
|
|
this.lockScreenSize = size;
|
||
|
|
lockScreenBack.style.transition = 'all 0s';
|
||
|
|
lockScreenBack.style.width = lockScreenBack.style.height = size + 'px';
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
lockScreenBack = document.getElementById('lock_screen_back');
|
||
|
|
}
|
||
|
|
let size = setLockBackSize();
|
||
|
|
this.lockScreenSize = size;
|
||
|
|
lockScreenBack.style.transition = 'all 3s';
|
||
|
|
lockScreenBack.style.width = lockScreenBack.style.height = size + 'px';
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|