yys-lock-screen v1.3.0

yys-lock-screen

一个基于vue的锁屏插件

用法

1.引入yys-lock-screen

import YysLockScreen from "yys-lock-screen";
import "yys-lock-screen/dist/yys-lock-screen.scss";
Vue.use(YysLockScreen);

2.使用yys-lock-screen

a.无需自定义解锁页面

template中

    <yys-lock-screen
        :delay="1*60"
        :visible.sync="lockScreenVisible"
        :userInfo="userInfo"
        @goLoginPage="goLoginPage">
    </yys-lock-screen>

ts中
```ts
  lockScreenVisible: boolean = false; // 上锁弹框是否展示
  get userInfo() { // 必须要传
    return {
      userName: "ygunoil", // 用户名
      passWord: "123456", // 用户密码
    };
  }

  goLoginPage() {
    // 回到登录页面;
  }

b.需要自定义解锁页面

template中

<yys-lock-screen
      :delay="30*60"
      :visible.sync="visible"
      :customUnlockPageVisible.sync="customUnlockPageVisible"
      :userInfo="userInfo"
     >
      <div slot="customUnlockPage" >
        <span @click="unlock">
          自定义解锁页面
        </span>
      </div>
    </yys-lock-screen>

ts中

  lockScreenVisible: boolean = false;
  customUnlockPageVisible: boolean = true; // 自定义解锁页面,默认为true，customUnlockPageVisible和slot="customUnlockPage"是必须要有的
  // 解锁成功后，只需把customUnlockPageVisible设为false即可
  get userInfo() {
    return {
      userName: "ygunoil", // 用户名
      passWord: "123456", // 用户密码
    };
  }