vue实现封锁页面

实现页面封锁的方法

在Vue中实现页面封锁通常涉及阻止用户交互或限制页面访问权限。以下是几种常见方法：

使用全局加载状态

通过Vuex或全局状态管理维护一个isLocked状态，控制页面元素的交互性：

// store.js
state: {
  isLocked: false
},
mutations: {
  setLockState(state, payload) {
    state.isLocked = payload
  }
}

<template>
  <div :class="{ 'pointer-events-none': $store.state.isLocked }">
    <overlay v-show="$store.state.isLocked" />
    <!-- 页面内容 -->
  </div>
</template>

路由拦截方案

利用Vue Router的导航守卫实现路由级封锁：

// router.js
router.beforeEach((to, from, next) => {
  const isLocked = store.state.isLocked
  if (to.meta.requiresUnlock && isLocked) {
    next('/locked-page')
  } else {
    next()
  }
})

全屏遮罩组件

创建可复用的锁屏组件：

<template>
  <div v-if="active" class="fixed inset-0 z-50 bg-black bg-opacity-70 flex items-center justify-center">
    <div class="text-white text-2xl">{{ message }}</div>
  </div>
</template>

<script>
export default {
  props: {
    active: Boolean,
    message: {
      type: String,
      default: '系统维护中，请稍后...'
    }
  }
}
</script>

键盘事件禁用

防止键盘操作导致意外交互：

mounted() {
  document.addEventListener('keydown', this.preventShortcut)
},
methods: {
  preventShortcut(e) {
    if (this.isLocked) {
      e.preventDefault()
      e.stopPropagation()
    }
  }
}

右键菜单禁用

阻止上下文菜单操作：

methods: {
  disableContextMenu(e) {
    if (this.isLocked) {
      e.preventDefault()
    }
  }
}

注意事项

• 确保解锁机制可靠，避免永久锁定
• 考虑添加自动解锁超时机制
• 重要操作需进行二次确认
• 移动端需同时禁用触摸事件

以上方法可根据实际需求组合使用，实现不同级别的页面封锁效果。