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

<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>

<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>