在VueJS组件中将样式应用于Flatpickr

Question

我正在尝试为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中，但从未应用过。

将样式应用于导入的组件的方法是什么？

Answer 1

您编写方法的方式是，绑定到一个名为“ pickerstyle”的数据属性，您可能没有在Vue实例上定义 。如果您尝试将字符串传递给“ classes”道具，则说明您没有绑定，因此不需要:。

我不知道您正在使用哪个库来提供<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应该会使它们在整个应用程序中都可用。