,html,vue.js"/>
时间戳

首页 > 解决方案 > Vue组件（vue-flatpickr-component）在外面渲染

html - Vue组件（vue-flatpickr-component）在外面渲染

问题描述

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

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

我的问题：

下面的代码：

应用程序.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>

从控制台：

从控制台：

标签： htmlvue.js

解决方案

刚刚在我们的项目中修复了类似的东西。

似乎flat-pickr 文档static中的选项在这里可以解决问题，假设样式设置为覆盖 flat-pickr 的默认值。

将日历放置在包装器内并靠近输入元素。* 将日历附加到特定元素使其取决于该元素的位置和样式。如果日历没有按预期定位，请检查容器的 CSS 规则。

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

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

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

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

推荐阅读