在Vue 3中实现页面锁屏功能

可以通过创建一个全屏遮罩层来实现。当需要锁屏时，显示这个遮罩层；当解锁时，隐藏它。下面是一个简单的示例来说明如何实现这个功能：

1. 创建锁屏组件

首先，我们创建一个锁屏组件（LockScreen.vue）：

<template>  
  <div v-if="isLocked" class="lock-screen">  
    <div class="lock-screen-content">  
      <!-- 这里可以添加锁屏时的内容，比如解锁按钮等 -->  
      <button @click="unlock">解锁</button>  
    </div>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      isLocked: false,  
    };  
  },  
  methods: {  
    lock() {  
      this.isLocked = true;  
    },  
    unlock() {  
      this.isLocked = false;  
    },  
  },  
};  
</script>  
  
<style scoped>  
.lock-screen {  
  position: fixed;  
  top: 0;  
  left: 0;  
  width: 100%;  
  height: 100%;  
  background-color: rgba(0, 0, 0, 0.5); /* 遮罩层背景色 */  
  z-index: 9999; /* 确保遮罩层在最上层 */  
  display: flex;  
  justify-content: center;  
  align-items: center;  
}  
  
.lock-screen-content {  
  /* 这里添加锁屏内容的样式 */  
  background-color: white;  
  padding: 20px;  
  border-radius: 5px;  
}  
</style>

2.在父组件中使用锁屏组件

然后，在你的父组件中引入并使用这个锁屏组件：

<template>  
  <div>  
    <!-- 其他内容 -->  
    <LockScreen ref="lockScreen" />  
    <button @click="toggleLock">切换锁屏状态</button>  
  </div>  
</template>  
  
<script>  
import LockScreen from './LockScreen.vue';  
  
export default {  
  components: {  
    LockScreen,  
  },  
  methods: {  
    toggleLock() {  
      this.$refs.lockScreen.isLocked ? this.$refs.lockScreen.unlock() : this.$refs.lockScreen.lock();  
    },  
  },  
};  
</script>