在<div id =“ app”>外部渲染的Vue组件（vue-flatpickr-component）

Question

我正在使用Vue组件vue-flatpickr-component。我注意到，该组件的一部分在 div id =“ app” 标签之外呈现。

问题在于，我想动态地（亮/暗模式）更改附加到 之外的类的CSS。

我的问题：

• 为什么组件的一部分不在div主标签之外？
• 如何将该组件放入主div？

以下代码：

App.vue

<template>
  <div id="app">
    <flat-pickr v-model="date"></flat-pickr>
  </div>
</template>

<script>
import flatPickr from "vue-flatpickr-component";
import "flatpickr/dist/flatpickr.css";

export default {
  name: "App",
  components: {
    flatPickr,
  },
  data: function () {
    return {
      date: new Date(),
    };
  },
};
</script>

<style>
</style>

从控制台：

Answer 1

刚刚修复了我们项目中的类似问题。

似乎 flat-pickr documentation 中的 static 选项将在这里起作用，假设样式设置为覆盖 flat-pickr 的默认值。

<块引用>

将日历放置在包装器内和输入旁边 元素。 * 将日历附加到特定元素使其成为 取决于该元素的位置和样式。如果日历不是 按预期定位，检查容器的 CSS 规则。

将其设置为引入 flat-pickr 组件的配置选项：

<flat-pickr :config="config" v-model="date"></flat-pickr>

然后在数据变量中定义配置选项，例如：

data: function () {
    return {
      config: {
        static: true,
      },