Vue項目中添加鎖屏功能

Ryan_Li 發(fā)布于2019-08-02 10:48 / 1557人閱讀

摘要：老司機快上車，來不及解釋了。作者相關文章基于實現后臺系統權限控制前端文檔匯總增刪改查附編輯添加彈框組件共用打賞衷心的表示感謝

0. 直接上預覽鏈接

Vue項目中添加鎖屏功能

1. 實現思路

( 1 ) 設置鎖屏密碼

( 2 ) 密碼存localStorage （本項目已經封裝h5的sessionStorage和localStorage）

( 3 ) vuex設置 SET_LOCK state.isLock = true (為true是鎖屏狀態(tài))

( 4 ) 在路由里面判斷vuex里面的isLock（為true鎖屏狀態(tài)不能讓用戶后退url和自行修改url跳轉頁面否則可以）

（1）設置鎖屏密碼

  handleSetLock() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.$store.commit("SET_LOCK_PASSWD", this.form.passwd)
          this.handleLock()
        }
      })
    },

（ 2 ) 密碼存localStorage setStore是自己封裝的方法

  SET_LOCK_PASSWD: (state, lockPasswd) => {
      state.lockPasswd = lockPasswd
      setStore({
        name: "lockPasswd",
        content: state.lockPasswd,
        type: "session"
      })
    },

( 3 ) vuex設置 SET_LOCK state.isLock = true 同時存在store里面

  SET_LOCK: (state, action) => {
      state.isLock = true
      setStore({
        name: "isLock",
        content: state.isLock,
        type: "session"
      })
    },

( 4 ) 在路由里面判斷vuex里面的isLock

 if (store.getters.isLock && to.path !== lockPage) {
      next({
        path: lockPage
      })
      NProgress.done()

源碼地址 前端學習交流群493671066，美女多多。老司機快上車，來不及解釋了。 作者相關Vue文章

基于Vue2.0實現后臺系統權限控制

前端文檔匯總

VUE2.0增刪改查附編輯添加model(彈框)組件共用

打賞衷心的表示感謝

GPU云服務器云服務器鎖屏功能云服務器搭建vue項目騰訊云服務器部署vue項目 vue項目放到云服務器上

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/52573.html

Vue項目中添加鎖屏功能

摘要：老司機快上車，來不及解釋了。作者相關文章基于實現后臺系統權限控制前端文檔匯總增刪改查附編輯添加彈框組件共用打賞衷心的表示感謝 0. 直接上預覽鏈接 Vue項目中添加鎖屏功能 1. 實現思路 ( 1 ) 設置鎖屏密碼 ( 2 ) 密碼存localStorage （本項目已經封裝h5的sessionStorage和localStorage） ( 3 ) vuex設置 SE...

SimpleTriangle 2019-08-22 18:22 評論0 收藏0
Vue項目中添加鎖屏功能

摘要：老司機快上車，來不及解釋了。作者相關文章基于實現后臺系統權限控制前端文檔匯總增刪改查附編輯添加彈框組件共用打賞衷心的表示感謝 0. 直接上預覽鏈接 Vue項目中添加鎖屏功能 1. 實現思路 ( 1 ) 設置鎖屏密碼 ( 2 ) 密碼存localStorage （本項目已經封裝h5的sessionStorage和localStorage） ( 3 ) vuex設置 SE...

SQC 2019-08-30 15:53 評論0 收藏0
iView 發(fā)布后臺管理系統 iview-admin，沒錯，它就是你想要的

摘要：簡介是基于，搭配使用組件庫形成的一套后臺集成解決方案，由前端可視化團隊部分成員開發(fā)維護。遵守設計和開發(fā)約定，風格統一，設計考究，并且更多功能在不停開發(fā)中。 showImg(https://segmentfault.com/img/remote/1460000011603206); 簡介 iView Admin 是基于 Vue.js，搭配使用 iView UI 組件庫形成的一套后臺集成解...

HackerShell 2019-08-21 17:06 評論0 收藏0
封裝框架的實踐

摘要：最近在嘗試著封裝一個框架，礙于種種原因，先從簡單的入手吧。基于和封裝的框架，集成數據存儲字體圖標庫拓展語言網絡請求等模塊，為了讓業(yè)務開發(fā)更專注于數據驅動。最近在嘗試著封裝一個框架，礙于種種原因，先從簡單的入手吧。基于vue和elementUI封裝的框架，集成數據存儲localforage、字體圖標庫font-awesome、css拓展語言scss、網絡請求axios等模塊，為了讓業(yè)...

Dogee 2019-08-23 13:57 評論0 收藏0