lockscreen-timeout-vue

lockscreen-timeout-vue 是一个简单的Vue组件，用于在用户长时间不活动时将系统锁屏，它适用于Vue 2和Vue 3项目。

安装

使用npm安装此包：

npm install lockscreen-timeout-vue

使用npm国内镜像安装

npm install lockscreen-timeout-vue --registry=https://registry.npmmirror.com

使用

1、在src/main.js中导入

import LockScreenTimeout from 'lockscreen-timeout-vue';

Vue.use(LockScreenTimeout);

2、在App.vue中使用

<template>
  <div id="app">
    <LockScreenTimeout :unlock-method="userUnlockMethod" :exclude="excludePaths" :time="time">
      <!-- App.vue模板内容 例如route-view -->
    </LockScreenTimeout>
  </div>
</template>

<script>
  export default {
    name: 'App',
    data() {
      return {
        excludePaths: ['/user/login'],  // 排除的路径, 如果不传默认是['/user/login']
        time: 10 * 60 * 1000, // 锁屏时间, 如果不传默认是10分钟, 单位是毫秒
      };
    },
    methods: {
      // 用户解锁方法，必须得是Promise方法
      // password: 用户输入的密码
      // 在Promise中可以先调用后台接口验证密码是否正确
      // 根据后台返回的结果来resolve或者reject
      // 通知组件解锁成功或者失败, resolve或者reject的参数必须包括status
      // status只能是'success'或者'error'
      userUnlockMethod(password) {
        return new Promise((resolve, reject) => {
          // setTimeout(() => {
          //   if (password === '123456') {
          //     resolve({status: 'success', message: '解锁成功'});
          //   } else {
          //     reject({status: 'error', message: '密码错误'});
          //   }
          // }, 1000); // 模拟异步请求延迟
        });
      }
    },
  };
</script>