Применение стиля к Flatpickr в компоненте VueJS - PullRequest
Новая
       9

Применение стиля к Flatpickr в компоненте VueJS

1 голос
/ 11 октября 2019

Я пытаюсь стилизовать поле ввода Flatpickr и не знаю, как применить стиль.

У меня есть компонент, который использует импорт компонента Flatpickr. Я пытаюсь применить стиль в

Пытаюсь применить стиль 

ComponentWithPickr.vue

В шаблоне: 

    <FlatPickr
        id="pickr"
        :classes="pickrstyle"
        v-show="false">
    </FlatPickr>

Стиль: 

<style lang="scss" scoped>
    .pickrstyle{
      background-color: red
     }
</style>

Flatpickr - имеет код Flatpickr 

ComponentPickr.vue

Стиль: 

<style lang="scss" scoped>
    .pickrstyle{
      background-color: red
     }
</style>

Я пытался добавить свой класс к ComponentWithPickr.vueа также в ComponentPickr.vue, и он никогда не применяется.

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

1 Ответ

0 голосов
/ 11 октября 2019

Как вы это написали, вы привязываетесь к свойству данных с именем «pickerstyle», которое у вас есть вероятно , не определенное в вашем экземпляре Vue. Если вы пытаетесь передать строку в «классы», значит, вы не привязываетесь, и поэтому вам не нужен :.

Я не знаю, какую библиотеку вы используете, которая предоставляет компонент <FlatPickr>, но если он действительно поддерживает classes проп, я бы предположил, что он ожидает либо строку, либо массив.

Я бы посоветовал вам попробовать это: 

<FlatPickr
  id="pickr"
  classes="pickrstyle"
  v-show="false">
</FlatPickr>

или это: 

<FlatPickr
  id="pickr"
  :classes="['pickrstyle']"
  v-show="false">
</FlatPickr>

Я также заметил, что вы также используете scoped атрибут вашего тега стиля. Стили с областью видимости применяются только к компоненту, где они объявлены . Это будет охватывать эти стили для ComponentPickr.vue, делая их недоступными для FlatPickr. Удаление scoped должно сделать их доступными в вашем приложении.

...