如何在Vue 3 + Bootstrap 5中实现乳白遮罩（milky overlay）效果

要实现点击按钮显示乳白遮罩的效果，你可以通过Vue响应式状态控制遮罩显示 + CSS固定定位实现全屏覆盖的方式完成，具体步骤及完整代码如下：

完整代码示例 #

<template>
  <div class="container">
    <div class="row">
      <button class="btn btn-dark" @click="overlayMilky()">Button</button>
    </div>

    <div class="row mt-2">
      <div class="col-12">
        <span>Input 2</span>
        <input class="form-control" />
      </div>
      <div class="col-12">
        <span>Input 3</span>
        <input class="form-control" />
      </div>
    </div>

    <!-- 乳白遮罩层 -->
    <div class="milky-overlay" v-show="isOverlayVisible"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isOverlayVisible: false // 控制遮罩显示的状态变量
    }
  },
  methods: {
    overlayMilky() {
      this.isOverlayVisible = !this.isOverlayVisible // 点击切换遮罩状态
    }
  }
}
</script>

<style scoped>
.milky-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(255, 255, 255, 0.8); /* 乳白半透明背景 */
  z-index: 999; /* 确保遮罩在页面元素上方 */
  /* 可选：如果需要遮罩不拦截下层点击，添加 pointer-events: none; */
}
</style>

关键细节说明 #

• 响应式状态：通过isOverlayVisible变量控制遮罩的显示/隐藏，点击按钮时切换变量值
• 遮罩定位：position: fixed让遮罩固定覆盖整个视口，不会随页面滚动移动
• 乳白效果：使用rgba颜色值调整白色的透明度，数值0.8可根据需求修改（越小越透明）
• 层级控制：z-index: 999确保遮罩不会被页面内其他元素遮挡
• 交互控制：如果需要遮罩下方的元素仍能被操作，可添加pointer-events: none属性；若要阻止下层交互则删除该属性

内容的提问来源于stack exchange，提问作者user16365685