javascript - vue-flatpickr-component 有奇怪的样式

Question

我目前正在尝试重现此处显示的“包装”示例：https ://ankurk91.github.io/vue-flatpickr-component/但即使复制粘贴我需要的确切代码片段（没有按钮样式） ，我得到一个奇怪/缩短的选择器组件

<div class="form-group">
          <label>Select date (wrap)</label>
          <div class="input-group">
            <flat-pickr v-model="form.date"
                        placeholder="Select date"
                        :config="configs.wrap"
                        :required="true"
                        @on-change="listenToOnChangeEvent"
                        class="form-control"
                        name="date-name"
                        :disabled="inputDisabled"
                        ref="datePickerWrap">
            </flat-pickr>
            <div class="input-group-append">
              <button type="button" title="Toggle" data-toggle>
                Toggle
              </button>
              <button type="button" title="Clear" data-clear>
                Clear
              </button>
            </div>
          </div>
        </div>

第一个是带有附加按钮的日期时间选择器（看起来很奇怪，没有什么是内联的），第二个没有任何特殊附加

我的代码如下所示：

      <div class="form-group">
        <label>Select date (wrap)</label>
        <div class="input-group">
          <flat-pickr ref="datePickerWrap"
                      v-model="registeredAtFrom"
                      :config="configs"
                      :required="true"
                      :disabled="inputDisabled"
                      placeholder="Select date"
                      class="form-control search"
                      name="date-name">
          </flat-pickr>
          <div class="input-group-append">
            <button class="btn btn-success" type="button" title="Toggle" data-toggle>
              Toggle
            </button>
            <button class="btn btn-danger" type="button" title="Clear" data-clear>
              Clear
            </button>
          </div>
        </div>
      </div>
      <v-spacer></v-spacer>
      <flat-pickr
        v-model="registeredAtTo"
        :config="configs"
        :placeholder="$t('message.searchFields.registeredAtTo')"
        class="form-control search"
        name="date"
      ></flat-pickr>

vue-flatpickr-component 配置：

configs: {
        wrap: true,
        enableTime: true,
        dateFormat: 'Y-m-d H:i:S',
        maxDate: new Date(),
        minuteIncrement: 1,
        locale: Hungarian,
        time_24hr: true
      }

相关的 package.json 元素：

"vue": "^2.5.2"    
"vue-flatpickr-component": "^8.1.1"    
"vuetify": "^1.2.3"

任何帮助将不胜感激，谢谢！

Answer 1

你确定你已经加载了 .css 吗？它应该在你导入包之后自己导入：

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

  ...
</script>