vue-multiselect 不加载 CSS

Question

我将 vue-multiselect 组件 (b15) 与 vue-cli（webpack 模板）一起使用，但组件的 CSS 未加载且组件呈现错误。有什么想法吗？

我的代码：

<template>
  <div>
      <div class="select2-container select2-container-multi full-width">
        <multiselect
          class="form-control form-control-select textarea" 
          :class="{ 'has-error': showError }"
          :options="localOptions"
          :label="labelKey"
          track-by="id"
          :multiple="multiple"
          :selected="value"
          :searchable="true"
          :placeholder="placeholder" 
          :loading="loading"
          :custom-label="formatLabel"
          :disabled="disabled"
          :readonly="readonly"
          @input="updateSelected"
          @close="blur">
        </multiselect>
      </div>
  </div>
</template>

<script>
import Multiselect from 'vue-multiselect'

export default {
  mixins: [inputMixin],

  components: {
    Multiselect
  }
}
</script>

呈现多选并且所有内容都没有应用任何样式。

Answer 1

你需要在末尾单独添加css，所以你的文件看起来是这样的：

<template>
  <div>
      <div class="select2-container select2-container-multi full-width">
        <multiselect
          class="form-control form-control-select textarea" 
          :class="{ 'has-error': showError }"
          @input="updateSelected"
          @close="blur">
        </multiselect>
      </div>
  </div>
</template>

<script>
import Multiselect from 'vue-multiselect'

export default {
  mixins: [inputMixin],
      components: {
    Multiselect
  }
}
</script>

<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>

vue-multiselect 不加载 CSS

vue-multiselect does not load CSS

vue-component

vuejs2