@lillianfisher

Как присвоить динамическому компоненту класc если scoped?

Здравствуйте, создавая слайдер - мне нужно динамически создавать div и присваивать ему стили. Однака так как scss scoped стили не приминяются - можно ли решить ето при scss scoped
<template>
  <div class="slider" ref="slider"></div>
</template>
<style lang="scss" scoped>
.slider {
  width: 100%;
  height: 100%;
background: green;
}
.frame {
    width: 100%;
  height: 100%;
background: blue;
}
</style>
<script>
export default {
  name: "Slider",
  mounted() {
    for (let i = 0; i < 3; i++) {
      let frame = document.createElement("div");
      frame.classList.add("frame"); //класс присваивается но стили не применяются
      this.$refs.slider.appendChild(frame);
    }
  },
};
</script>
  • Вопрос задан
  • 112 просмотров
Решения вопроса 1
@myJusty
В случае если у вас style lang="css" используйте wrapper-class /deep/ current-class (тоесть
.slider /deep/ .frame
)
Однако ето приведет к ошибке в случае style lang="scss" — используйте ::v-deep .frame{color:red;}
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
0xD34F
@0xD34F Куратор тега Vue.js
Инкапсуляция стилей реализуется путём добавления уникального (в пределах компонента) атрибута элементам и, соответственно, селекторам в css-коде. Вы создаёте элементы вручную, так что нужный атрибут у них отсутствует - поэтому стили не применяются. Чтобы применились, можно воспользоваться т.н. глубоким селектором - для этого замените .frame { на .slider /deep/ .frame {.

А вообще,...

...неплохо было бы вам руки оборвать за подобный код:

mounted() {
  for (let i = 0; i < 3; i++) {
    let frame = document.createElement("div");
    frame.classList.add("frame"); //класс присваивается но стили не применяются
    this.$refs.slider.appendChild(frame);
  }
},

Считаете, что читать документацию не надо? Если ваша цель - пополнить ряды говнокодеров, то путь выбрали верный.
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы