当前位置：首页 > VUE

vue实现封锁页面

2026-03-08 11:21:44VUE

Vue 实现页面封锁的方法

在 Vue 中实现页面封锁通常用于阻止用户在特定条件下进行交互，例如权限不足、数据加载中或维护状态。以下是几种常见实现方式：

全局遮罩层组件

创建全屏遮罩组件阻止用户操作：

<template>
  <div v-if="isLocked" class="page-lock">
    <div class="lock-content">
      <!-- 自定义提示内容 -->
      <p>{{ message }}</p>
    </div>
  </div>
</template>

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

<style scoped>
.page-lock {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.7);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}
.lock-content {
  color: white;
  text-align: center;
}
</style>

路由守卫拦截

通过 Vue Router 的导航守卫实现页面访问控制：

// router.js
router.beforeEach((to, from, next) => {
  const isMaintenance = store.state.system.maintenanceMode
  if (to.meta.requiresAuth && isMaintenance) {
    next('/maintenance') // 跳转到维护页面
  } else {
    next()
  }
})

指令式锁定

创建自定义指令实现元素级锁定：

// main.js
Vue.directive('lock', {
  inserted(el, binding) {
    if (binding.value) {
      el.style.pointerEvents = 'none'
      el.style.opacity = '0.5'
    }
  },
  update(el, binding) {
    if (binding.value) {
      el.style.pointerEvents = 'none'
      el.style.opacity = '0.5'
    } else {
      el.style.pointerEvents = 'auto'
      el.style.opacity = '1'
    }
  }
})

使用方式：

<div v-lock="isLocked">敏感内容区域</div>

状态管理集成

结合 Vuex 实现全局锁定状态管理：

// store.js
export default new Vuex.Store({
  state: {
    pageLocked: false
  },
  mutations: {
    setPageLock(state, status) {
      state.pageLocked = status
    }
  }
})

组件中使用：

vue实现封锁页面

<template>
  <div>
    <button @click="lockPage">锁定页面</button>
    <p v-if="$store.state.pageLocked">页面已被锁定</p>
  </div>
</template>

<script>
export default {
  methods: {
    lockPage() {
      this.$store.commit('setPageLock', true)
    }
  }
}
</script>