vue 简单实现锁屏功能（不涉及路由）

本案例的原理是在原有页面上添加遮罩层进行锁屏，当解锁后遮罩层消失，回到原来的页面，而不做反反复复的路由跳转，实现起来简单。

1、在Vuex中设置全局参数

在store/index中：

import Vuex from 'vuex'

Vue.use(Vuex)

import md5 from 'js-md5';
const user = {
  state: {
    isCover: localStorage.getItem("HLT_lockCOver") || false, //是否覆盖
    isLock: localStorage.getItem("HLT_isLock") || false, //是否锁屏
  },
  mutations: {
    // 锁屏
    SET_LOCK: (state, cover) => {
      state.isLock = true,
      state.isCover = cover;
      localStorage.setItem("HLT_LockCOver", state.isCover);
    },
    CLEAR_LOCK: (state, cover) => {
      state.isCover = cover;
      state.isLock = false;
      localStorage.removeItem("HLT_LockCOver");
    },
    PREVENT_REFRSH: (state, cover) => {
      state.isCover = cover
    },
  },

  actions: {
     // 登录方法
    Login({
      commit
    }, userInfo) {
      const username = userInfo.username.trim()
      const password = userInfo.password
      const code = userInfo.code
      const uuid = userInfo.uuid
      let md5password = md5(password);
      return new Promise((resolve, reject) => {
        login(username, password, code, uuid).then(res => {
          setToken(res.token)
          commit('SET_TOKEN', res.token)
          commit('SET_PASSWORD', md5password)

          //记得登录的时候用MD5加密将登录密码保存在localStorage中,用于后续解锁
          localStorage.setItem("lockPassword", md5password)

          resolve()
        }).catch(error => {
          reject(error)
        })
      })
    },

     // 与锁屏有关方法
    setlock: ({commit}, cover) => {
      commit("SET_LOCK", cover)
    },
    clearLock: ({commit}, args) => {
      commit("CLEAR_LOCK", args)
    },
    preventRefresh: ({commit}, cover) => {
      commit("PREVENT_REFRSH", cover)
    }

}

const store = new Vuex.Store({
  modules: {
    user,
  },
})

export default store

2、编写锁屏页面：

创建sereen/index.vue页面用来做锁屏页面，样式和图片自己随意编辑：

<template>
  <div class="app" v-if="isCover">
    <el-form class="userInfo">
      <div class="body-icon">
        <img src="@/icons/svg/power-screen-xiaoyue.svg" />
      </div>
      <div class="title-icon">
        <img src="@/icons/svg/power-login-title.svg" />
      </div>
      <div>
        <img :src="avatar" class="lock-avatar" />
      </div>
      <el-form-item>
        <el-row style="margin-left: 100px">
          <el-col :span="2"
            ><img
              width="14px"
              height="14px"
              src="@/icons/svg/power-login-account.svg"
          /></el-col>
          <el-col :span="12" class="lock-nickName">{{ nickName }}</el-col>
        </el-row>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="userForm.newPw"
          placeholder="请输入登陆密码"
          type="password"
          auto-complete="off"
          @keyup.enter.native="unLock()"
          show-password
        >
          <div slot="prefix" style="margin-top: 4px; margin-left: 3px">
            <img
              width="16px"
              height="16px"
              src="@/icons/svg/power-login-password.svg"
            /></div
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          :loading="loading"
          size="medium"
          type="primary"
          style="width: 100%"
          @click="unLock"
          ><i class="el-icon-unlock"></i>解锁</el-button
        >
        <!-- <el-button
          circle
          type="primary"
          plain
          icon="el-icon-unlock"
          @click="unLock"
        ></el-button> -->
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { mapActions, mapGetters } from "vuex";
import md5 from "js-md5";
export default {
  data() {
    return {
      userForm: {
        newPw: "",
        user: "",
        // isCover:this.$store.state.user.isCover,
        // isLock:this.$store.state.user.isLock,
      },
      loading:false,
    };
  },
  computed: {
    ...mapGetters(["isCover", "isLock", "avatar", "nickName"]),
  },

  methods: {
    ...mapActions(["clearLock", "preventRefresh"]),
    unLock() {
      let oldAuct = localStorage.getItem("lockPassword");
      if (this.userForm.newPw === "" || this.userForm.newPw === undefined) {
        return;
      } else if (md5(this.userForm.newPw) != oldAuct) {
        this.userForm.newPw = "";
        this.$notify.error({
          title: "错误",
          message: "解锁密码错误，请输入登陆密码解锁",
          duration: 1500,
        });
        return;
      } else {
        setTimeout(() => {
          this.$notify.success({
            title: "解锁成功",
            duration: 1500,
          });
          this.userForm.newPw = "";
          this.$store.dispatch("clearLock", false);
        }, 500);
      }
    },
    preventRefresh() {
      let lockCOver = localStorage.getItem("HLT_LockCOver");
      this.$store.dispatch("preventRefresh", lockCOver);
    },
  },
  mounted() {
    this.preventRefresh();
  },
};
</script>

<style lang="scss" scoped>
.app {
  background-image: url("../../icons/svg/power-login-background.svg");
  background-size: 100%; // 背景图片大小最大
  height: 100%;   //宽、高也最大
  width: 100%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-color: skyblue;  //一定要设置背景颜色
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1500;
  .userInfo {
    // display: flex;
    background: #ffffff;
    // height: 300px;
    width: 400px;
    padding: 25px 25px 5px 25px;
    .title-icon {
      width: 120px;
      height: 20px;
      margin-bottom: 22px;
    }
    .body-icon {
      width: 500px;
      height: 120px;
      position: absolute;
      margin-left: -152px;
      margin-top: -166px;
    }
    .lock-avatar {
      width: 80px;
      height: 80px;
      border-radius: 50px;
      position: relative;
      margin-left: 135px;
      margin-bottom: 10px;
    }
    .lock-nickName {
      margin-top: -2px;
      font-size: 14px;
      font-weight: 560;
      text-align: center;
    }
    .el-input {
      height: 38px;
      input {
        height: 38px;
      }
    }
  }
}
</style>

3、在页面中绑定按钮使用它

<el-button @click="lockScreen">锁屏</el-button>

    // 锁屏：
    lockScreen() {
      this.$store.dispatch("setlock", true);
    },