时间戳

首页 > 解决方案 > 如何在 vue.js 2 中分离父动态类 css

javascript - 如何在 vue.js 2 中分离父动态类 css

问题描述

在这里，我的问题是我正在应用一个动态类，并且父类中存在不透明度，并且由于它也适用于其中的 div，对于 1 个特定的 div，我不需要这个动态不透明度，我该如何更改它。

下面是我的代码

css

.cancelled {
    opacity: 0.25;
  }

Vue

在方法中提到了如下条件

 <section
      class="checkitem"
      v-for="(item, index) in data"
      :key="index"
      :class="getProgram(index, item)"
    >
    <div class="class1"> </div>
    <div class="class2"> </div>
    <div class="class3"> </div>
  </section>

这里 getProgram(index, item) 有一个不透明度，它正在将它添加到class1、class2所以这里我不希望将不透明度添加到class1 和 class 2

方法 ： - 

 getProgram(index, item) {
      return [{ cancelled: item.cancelled }];
    },

标签： javascriptcssvue.jssassvuejs2

解决方案

  1. 将部分样式设置为opacity: 1; position:relative;
  2. 创建一个额外的内部 div，它不会包装当前的子元素并将所有样式从部分应用到它（你可以使用checkitem它的类）。然后根据需要更改此 div 不透明度。
 <section
      class="checkitem__wrapper"
      v-for="(item, index) in data"
      :key="index"
    >
    <div class="checkitem" :class="getProgram(index, item)"></div>
    <div class="class1"> </div>
    <div class="class2"> </div>
    <div class="class3"> </div>
  </section>

如果您有填充、边距和边框，则需要进行额外的调整——将它们移动到 .checkitem__wrapper

.checkitem__wrapper {
  position: relative;
}
.checkitem {
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
}
.cancelled {
  opacity: 0.25;
}

推荐阅读