vue multiselect

vue-multiselect

版本3的文档

v3.0.0的文档几乎与v2.x相同，与v2.x相同。对于V3和以前版本的完整文档，请查看：Vue-Multiselect.js.org

特征和特征：

• 没有依赖性

• 单个选择

• 多个选择

• 标记

• 下拉

• 过滤

• 搜索建议

• 逻辑分为混合物

• 基本组件和对自定义组件的支持

• V模型支持

• Vuex支持

• 异步选项支持

• 完全可配置（请参见下面的道具列表）

安装和基本用法

npm install install vue-multiselect@next

 <模板>
  <div>
    <vuemultiselect v-model =“ selected”：options =“ options”>
    </vuemultiselect>
  </div>
</template> <cripct> import import vuemultiselect从'vue-multiselect'export default {组件：{vuemultiselect}，data（）{retage（retage {selected：null：null，options：['list''，'of'of'，'options'，'options']}} }} </script> <样式src =“ vue-multiselect/dist/vue-multiselect.css”> </style>

JSFIDDLE

示例JSFIDDLE - 将其用于发行复制。

例子

单个选择 /下拉

<vuemultiselect
  ：model-value =“ value”
  ：options =“源”
  ：搜索=“ false”
  ：接近选择=“ false”
  ：ally-empty =“ false”
  @update：model-value =“更新”
  标签=“名称”
  占位符=“选择一个”
  track-by =“ name”/>

搜索单一选择

<vuemultiselect
  V-Model =“ value”
  ：options =“源”
  ：关闭选择=“ true”
  ：clear-on-select =“ false”
  占位符=“选择一个”
  标签=“名称”
  track-by =“ name”/>

多次选择与搜索

<vuemultiselect
  V-Model =“ Multivalue”
  ：options =“源”
  ：多=“ true”
  ：关闭选择=“ true”
  占位符=“选择一些”
  标签=“名称”
  track-by =“ name”/>

标记

与@tag事件

<vuemultiselect
  V-Model =“ TaggingSelected”
  ：options =“ taggingOptions”
  ：多=“ true”
  ：taggable =“ true”
  @tag =“ addtag”
  tag-placeholder =“添加为新标签”
  占位符=“打字搜索或添加标签”
  标签=“名称”
  track-by =“代码”/>

 addtag（newtag）{
  const tag = {名称：newtag，代码：newtag.substring（0，2） + Math.floor（（Math.random（） * 10000000））
  }
  this.taggingOptions.push（tag）
  this.taggingselected.push（tag）}，

异步下拉

<vuemultiselect
  V-Model =“ SelectedCountries”
  ：options =“国家”
  ：多=“多重”
  ：可搜索=“可搜索”
  @search-change =“ asyncfind”
  占位符=“搜索类型”
  标签=“名称”
  track-by =“代码”>
  <模板#noresult>
    哎呀！找不到元素。考虑更改搜索查询。
  </template>
</vuemultiselect>

方法： {
  asyncfind（query）{this.countries = findService（query）
  }}}

特别感谢

感谢Matt Elen贡献了此版本！

@Shentao的Vue-Mulitselect组件的VUE 3升级。这个想法是，当您升级到VUE 3时，您可以将两个组件交换出来，一切都应该简单地工作。随时查看我们如何将产品升级到vue 3的故事

贡献

＃用Minificationnpm运行捆绑包＃运行单元testsnpm运行测试的分配构建