vue多选组件自定义样式

Question

我添加了一个vue多选组件...但我想用css样式自定义它。我已经添加了一些 css 样式，但不能做我想做的一切。就像我想更改选项高度、选择框高度、所选项目/十字按钮的颜色等。我该怎么做这些事情。这些元素的类名是什么以及如何修改这些内容。

<multiselect
                    v-model="value"
                    :options="options"
                    :multiple="true"
                    :close-on-select="false"
                    :clear-on-select="false"
                    :preserve-search="true"
                    :hide-selected="true"
                    :option-height="10"
                    class="min-w-200 w-full mb-2"
                    open-direction="bottom"
                    placeholder="--Select One or More--"
                    :show-labels="false"
                    label="name"
                    track-by="name"
                    :preselect-first="true"
                  >
                    <span
                      slot="selection"
                      slot-scope="{ values, search, isOpen }"
                      class="multiselect__single"
                      v-if="values.length &amp;&amp; !isOpen"
                      >{{ values.length }} options selected</span
                    >
                  </multiselect>

到目前为止我已经创建了这个。

这是我的CSS代码：

<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
<style lang="scss" >
.multiselect__tag {
  color: rgb(48, 48, 48);
  background-color: rgba(var(--vs-primary), 0.3);
  font-size: 01rem;
}
.multiselect__tag:hover {
  background-color: rgba(var(--vs-warning), 0.3);
}

.multiselect__option--disabled {
  background: purple;
  color: rgba(var(--vs-primary), 1);
  font-style: italic;
}

.multiselect__option--highlight {
  background-color: rgba(var(--vs-primary), 1);
  color: rgb(255, 255, 255);
  font-size: 0.9rem;
  height: 1rem;
}

.multiselect__content {
  background: rgb(255, 255, 255);
  color: #444;
  font-size: 0.9rem;
}
.multiselect__single {
  height: 0.8rem;
  font-size: 01rem;
  color: #444;
}
.multiselect__tag {
  position: relative;
  display: inline-block;
  padding: 0.25rem 1.625rem 0.25rem 0.625rem;

  margin-right: 0.625rem;

  line-height: 1;

  margin-bottom: 0.5rem;
}
</style>

Answer 1

您可以使用 SASS 文件对其进行自定义。我经常在 github 存储库上参考以下问题，以使多选与引导程序风格相匹配。

https://github.com/shentao/vue-multiselect/issues/718

您可以找到以自己的方式自定义所需的一切，因为它还包含很多变量。