如何使用 Vueform/multiselect 库禁用或隐藏标签？

Question

我有以下代码并且运行良好。当我在搜索栏中单击时，会出现一个下拉菜单，当我 select 一个选项时，标签会显示在搜索栏中。我想隐藏或禁用它，但我在文档中找不到任何解决方法。

Link 到下拉菜单当前的样子 https://i.stack.imgur.com/u9CLv.jpg

<template>
  <div>
    <Multiselect
      v-model="value"
      mode="tags"
      :hideSelected="false"
      :caret="false"
      :close-on-select="false"
      :searchable="true"
      :create-option="true"
      :options="options"
    />
    
    {{ value }}
  </div>
</template>
<script>
import Multiselect from "@vueform/multiselect";
export default {
  components: {
    Multiselect,
  },
  data() {
    return {
      value: [],
      options: [
        { value: "batman", label: "Batman" },
        { value: "robin", label: "Robin" },
        { value: "joker", label: "Joker" },
      ],
    };
  },
};
</script>
<style src="@vueform/multiselect/themes/default.css"></style>


  [1]: https://i.stack.imgur.com/u9CLv.jpg

Answer 1

一个解决方案是将 mode 设置为 multiple 而不是 tags。

当在 multiple 模式下选择选项时，搜索栏指示所选选项的数量而不是它们的值：

<Multiselect mode="multiple" />

demo 1

如果您更喜欢该标签作为占位符，解决方法是将 multipleLabel 指定为 returns 占位符字符串的函数：

<template>
  <Multiselect mode="multiple"
               placeholder="Characters"
               :multipleLabel="() => 'Characters'"
               />
</template>

<style scoped>
/* keep the multiple-label text light */
:deep(.multiselect-multiple-label) {
  color: #ababab;
}
</style>

demo 2

如何使用 Vueform/multiselect 库禁用或隐藏标签？

How to disable or hide Tags using Vueform/multiselect librabry?

vue.js

vue-multiselect