如何在 vue js 中创建乳白色的叠加层答案

【问题标题】：how to create milky overlay in vue js如何在 vue js 中创建乳白色的叠加层
【发布时间】：2022-11-14 16:16:17
【问题描述】：

我正在使用Vue 3 和Bootstrap 5。

我有一个button 和两个inputs。当我单击button 时，我想要一个"milky" overlay，如下所示：

我怎样才能做到这一点？

使用的代码：

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

<script>
  export default {
    methods: {
      overlayMilky() {
        //set overlay to milky 
      }
    }
  }
</script>

【问题讨论】：

降低不透明度就可以了

标签： javascript vue.js vuejs3 bootstrap-5

【解决方案1】：

您需要添加一个 data 字段来描述“乳白色”叠加状态。所以在overlayMilky方法中你需要做的就是设置this.milkyOverlay = true。然后使用这个 milkyOverlay 属性添加 milky css 类或在顶部显示 milky div。

【讨论】：