zoukankan      html  css  js  c++  java
  • vue 锁屏功能开发

    一.锁屏功能实现思路
    1.在页面中设置锁屏密码
    2.通过vuex将锁屏状态存储起来
    3.由于vuex在页面刷新后会丢失状态,所以需要借用localStorage存储锁屏状态
    4.解锁时匹配设置的锁屏密码时解锁返回锁屏前的页面
    5.因为要保证用户在点击锁屏前的操作所以选择遮罩来实现锁屏;
    6.用户忘记锁屏密码可以到login页面重新登录
    二.锁屏功能的实现
    1.锁屏密码未设置默认为000000,可以点击右上角的头像,在弹出的菜单中选择个人中心,点击基本信息右侧的编辑图标,之后在锁屏密码中输入要设置的锁屏密码点击保存即可完成设置
    2.在Vuex中定义锁屏的状态属性,创建对应的state,实现对锁屏状态的读取写入和清除功能。
    state: {
    isLock:false
    },
    getters: {
    isLock:state=>state.isLock,
    },
    mutations: {
    SET_LOCK(state,action){
    state.isLock=true
    localStorage.setItem('isLock',state.isLock)
    },
    CLEAR_LOCK(state,action){
    state.isLock=false
    localStorage.removeItem('isLock')
    }
    }
    3.添加锁屏页面,该页面提供输入密码和退出登录功能
    4.解锁功能,只有当输入的密码和我后台设置的锁屏密码一致后进入锁屏前的页面
    this.$api.get('/api/User/GetUserLockPassword',{password:this.passwd},(response)=>{
    if(response.code==200){
    this.passwd=''
    this.passwdError=false
    this.$store.state.isLock=false
    localStorage.setItem('isLock',false)
    this.$store.commit('CLEAR_LOCK')
    }else if(response.code==666){
    this.passwd=''
    this.errormessage="解锁密码错误,请重新输入"
    this.passwdError=true
    }
    });

    其实就是在index页  import一个子组件vue  设置为全屏  通过以上状态来控制是否显示,easy

  • 相关阅读:
    一个自动打补丁的脱机程序
    OPC 学习交流感想
    串口标准,说说流控制(RTS/CTS/DTR/DSR 你都明白了吗?)
    asp.net中调用COM组件发布IIS时常见错误 80070005解决方案
    可运行XP的最少后台服务配置
    MapGIS 7.0 SP2 企业版 & MapGIS 7.1IMS
    简单认识一下S60系统
    常用正则表达式
    图像处理:遮罩
    office2003中WORD中visio图无法打印中文问题解决方法
  • 原文地址:https://www.cnblogs.com/zwbsoft/p/13328827.html
Copyright © 2011-2022 走看看