vue-screen-lock

npm i vue-screen-lock -D

In your project:

import vueScreenLock from 'vue-screen-lock';
import 'vue-screen-lock/src/lock.css';
Vue.use(vueScreenLock);

Use the component:

<template>
    <div id="app">
        <p @click='lock()'>Click me</p>
    </div>
</template>
 
<script>
export default {
    data() {
        return  {
        }
    },
    created() {
    },
    methods: {
        lock() {
            this.$screenLock('lock', {
                width: '300px', // 解锁区域宽度
                height: '300px', // 解锁区域高度
                firstLock: window.sessionStorage.getItem('PASSWORD')?false:true,  // 检查是否是第一次进入锁屏页面
            });
        }
    }
}
</script>

Demo

demo