当前位置：首页 > 前端教程

elementui锁屏

2026-01-12 15:52:42前端教程

ElementUI 锁屏功能实现

ElementUI 本身并未直接提供锁屏组件，但可以通过遮罩层、自定义指令或结合 Vue 路由守卫实现类似效果。以下是几种常见实现方式：

使用遮罩层与自定义指令

通过全局指令控制锁屏状态，覆盖全屏遮罩层并禁用交互：

// main.js 或全局指令文件
import Vue from 'vue';

Vue.directive('lock-screen', {
  inserted(el, binding) {
    if (binding.value) {
      const mask = document.createElement('div');
      mask.style.position = 'fixed';
      mask.style.top = '0';
      mask.style.left = '0';
      mask.style.width = '100%';
      mask.style.height = '100%';
      mask.style.background = 'rgba(0, 0, 0, 0.5)';
      mask.style.zIndex = '9999';
      mask.id = 'lock-screen-mask';
      document.body.appendChild(mask);
      document.body.style.overflow = 'hidden';
    }
  },
  update(el, binding) {
    const mask = document.getElementById('lock-screen-mask');
    if (binding.value) {
      if (!mask) {
        // 同上插入遮罩层逻辑
      }
    } else if (mask) {
      document.body.removeChild(mask);
      document.body.style.overflow = '';
    }
  }
});

使用方式：

elementui锁屏

<template>
  <div v-lock-screen="isLocked"></div>
  <el-button @click="isLocked = !isLocked">切换锁屏</el-button>
</template>

结合 Loading 组件扩展

利用 ElementUI 的 loading 全屏加载样式，添加自定义锁屏文案：

let loadingInstance;

function lockScreen() {
  loadingInstance = ElLoading.service({
    lock: true,
    text: '系统已锁定，请输入密码解锁',
    background: 'rgba(0, 0, 0, 0.8)',
    customClass: 'lock-screen-loading'
  });
}

function unlockScreen() {
  loadingInstance?.close();
}

通过 CSS 自定义样式：

elementui锁屏

.lock-screen-loading .el-loading-spinner {
  color: #fff;
  font-size: 18px;
}

路由守卫全局控制

在需要权限的页面中，通过路由守卫强制锁屏：

// router.js
router.beforeEach((to, from, next) => {
  if (to.meta.requiresLock && !store.state.unlocked) {
    next({ path: '/lock-screen' });
  } else {
    next();
  }
});

锁屏页面可设计为独立组件，包含密码输入表单：

<template>
  <div class="lock-screen-container">
    <el-form @submit.native.prevent="unlock">
      <el-input v-model="password" type="password" placeholder="输入解锁密码" />
      <el-button type="primary" native-type="submit">解锁</el-button>
    </el-form>
  </div>
</template>