Как отсоединить Родительский динамический класс css в vue.js 2


Как отсоединить Родительский динамический класс css в vue.js 2

18.11.2020 09:44:05 Просмотров 4 Источник

здесь моя проблема заключается в том, что я применяю динамический класс и в котором непрозрачность есть в родительском классе, и из-за этого она также применяется к div в нем, и для 1 конкретного div мне не нужна эта динамическая непрозрачность, как я могу ее изменить.

ниже приведен мой код

CSS

.cancelled {
    opacity: 0.25;
  }

Вью

В методах упоминается условие, подобное приведенному ниже

 <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) имеет непрозрачность, и он добавляет ее к классу 1, классу 2, поэтому здесь я не хочу, чтобы непрозрачность была добавлена к классу 1 и классу 2

Методы :--

 getProgram(index, item) {
      return [{ cancelled: item.cancelled }];
    },
У вопроса есть решение - Посмотреть?

Ответы - Как отсоединить Родительский динамический класс css в vue.js 2 / How to detach the parent dynamic class css in vue.js 2

hatef

23.11.2020 01:14:14

Из вашего вопроса не совсем ясно, каковы критерии исключения детей из применяемой непрозрачности, но в CSS вы могли бы сделать что-то вроде этого:

.cancelled > div:not(.class1):not(.class2){
    opacity: 0.25;
}

Это применит непрозрачность только к третьему div в вашем примере. Если вы хотите сделать это более динамично, вы можете применить класс к дочерним элементам, а затем исключить этот класс из селектора CSS.

Вот простой пример, чтобы дать вам представление:

 <section
     class="checkitem"
     v-for="(item, index) in data"
     :key="index"
     :class="getProgram(index, item)"
 >
    <div class="class1" :class="isExcluded('yes') ? 'is-excluded' : ''">Div 1</div>
    <div class="class2" :class="isExcluded('yes') ? 'is-excluded' : ''">Div 2</div>
    <div class="class3" :class="isExcluded('no') ? 'is-excluded' : ''">Div 3</div>
  </section>

И:

methods: {
    isExcluded(param) {
        return param === 'yes';
    }
}

CSS:

.cancelled > div:not(.is-excluded) {
    opacity: 0.25;
}
Zibx

26.11.2020 04:43:19

  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>

Вам нужно сделать дополнительную настройку, если у вас есть padding, margin и border-переместите их в оболочку. checkitem__

.checkitem__wrapper {
  position: relative;
}
.checkitem {
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
}
.cancelled {
  opacity: 0.25;
}
Является ответом!
Anton

26.11.2020 12:00:31

У нас уже есть ответ в комментариях. Я просто поставлю это как ответ.

Все дочерние элементы всегда наследуют непрозрачность своих родителей и никогда не могут быть больше. (с) паром городе Краненбург

Похоже, вы не понимаете, как работает CSS. Если родитель имеет непрозрачность: 0.25; это означает, что весь html внутри него унаследует этот стиль. Если вы не хотите, чтобы class1 и class2 унаследовали эту непрозрачность, то вам нужно визуализировать их вне родительского объекта. в) Адам Орлов

Таким образом, проблема здесь заключается в следующем: если вы добавите непрозрачность в родительский класс, то все элементы внутри будут иметь максимальное значение этой непрозрачности.

Решение: не добавляйте непрозрачность к родительскому классу, а к дочерним. Так что на ваш изначальный вопрос here i dont want opacity to be added to class1 & class 2, вам просто нужно обновление CSS-файла:

.cancelled .class3 {
    opacity: 0.25;
}

Так что только класс 3 будет иметь непрозрачность, но не класс 1 и класс 2, Как вы хотите.

Возможная проблема: вы можете применить некоторые стили к родителю, и вы хотите, чтобы они также были полупрозрачными (фон или что-то другое).

Затем вам нужно переместить все это в новый внутренний элемент:

 <section
      class="checkitem"
      v-for="(item, index) in data"
      :key="index"
      :class="getProgram(index, item)"
    >
    <div class="all-the-stylings-from-parent-go-here"></div>
    <div class="class1"> </div>
    <div class="class2"> </div>
    <div class="class3"> </div>
  </section>

И так CSS будет:

.cancelled .class3, .cancelled .all-the-stylings-from-parent-go-here {
    opacity: 0.25;
}
Помочь в развитии проекта:
Закрыть X