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>

the first one is a datetimepicker with appended buttons (looks weird and nothing is inline), the second one does not have anything special attached to it

我的代码如下：

      <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>