Vue实现锁屏功能

这两天刚做了个新需求，要做个系统锁屏（当然锁的是当前的系统），就类似于电脑锁屏似的。

共两种情况下锁屏，一种是无操作一定时间后自动锁屏；第二种是可以按下组合键（快捷键）主动进行锁屏。下面具体来说一下该需求的想法、思路以及实现

然后再说下想法思路吧。首先实现锁屏一般也就两种方式：

一种是去写个页面，当达到条件时要跳转到该锁屏页面，但是有一些要注意的地方， 比如：如果跳转的时候使用的$router.push，那么我是可以通过点击浏览器的回退按钮回到上一个页面的，这个要做一下限制。还有一种可能是我如果直接在浏览器上输入某个页面的路径，那么是不是也会跳转？所以我们要有个全局的变量来记录当前是不是锁屏状态，如果是锁屏状态，我们要对其进行限制。当然这只是举例的两种情况，真实做起来或许还有其他情况，反正要考虑周全，不然后面会出现你意想不到的bug

第二种就是直接去写遮罩层了，也是我当前实现锁屏的方式。这种方式相对上面来讲，会比较简单一些，也还算方便，我们只需要在达到条件后将该遮罩层显示出来就可以了，当然遮罩层的优先级肯定要设置最高的，要不然怎么覆盖掉任意当前的页面呢，也正是因为这个优先级最高，导致在这个遮罩层组件中有些$message这样的消息提示或弹窗显示不出来。这也算是一个缺陷。不过一般锁屏页面也没什么太多操作，主要是页面有个背景图，然后输入解锁密码进行解锁就可以了，所以影响并不大。还有一种需要注意，就是我现在已经锁屏页面了，我这时候打开控制台，然后是不是可以去修改这个遮罩层的样式呢？比如我给遮罩层加个display: none; 遮罩层是不是没了？答案是的，所以我们要做限制！ 打开控制台的方式无非也就两种方式，一种是F12（Fn + F12）