如何在vue js中创建乳白色覆盖图

fivyi3re 于 2022-11-17 发布在 Vue.js

关注(0)|答案(2)|浏览(141)

我正在使用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>

vue.js

来源：https://stackoverflow.com/questions/74428475/how-to-create-milky-overlay-in-vue-js

2条答案

按热度按时间

2eafrhcq1#

首先，您需要用container元素包围输入，并为此元素给予position: relative，并向其添加一个子元素，该子元素将是overlay，这应该使position: absolute相对于container元素是绝对的，还应该有width: 100%; height: 100%; top: 0px; left: 0px;来获取容器元素的完整大小，然后有条件地使用v-if，您可以使用state将其show/hide
第一个
这是一个完整的代码示例。

<template>
  <div>
    <div class="row">
      <button class="btn btn-dark" @click="overlayMilky()">Button</button>
    </div>
    <div class="container">
      <div v-if="showOverlay" class="overlay"></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>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showOverlay: false,
    };
  },
  methods: {
    overlayMilky() {
      this.showOverlay = !this.showOverlay;
      //set overlay to milky
    },
  },
};
</script>

<style>
.container {
  position: relative;
}

.overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background-color: rgba(255, 255, 255, 0.4);
}
</style>