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>

渲染Multiselect，并且不应用任何样式。

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

1 个答案: