Vue 组件（vue-flatpickr-component）在 <div id="app"> 外渲染答案

【问题标题】：Vue component (vue-flatpickr-component) rendering outside <div id="app">Vue 组件（vue-flatpickr-component）在 <div id="app"> 外渲染
【发布时间】：2020-12-10 22:04:24
【问题描述】：

我正在使用 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>

从控制台：

【问题讨论】：

标签： html vue.js

【解决方案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,
      },

【讨论】：