Vue 3/2 多选组件 - multiselect

Vue 3/2 多选组件 - multiselect
插件名称 multiselect
版本号 v1.3.6
发布时间 2020年12月18日
插件作者 vueform

适用于Vue.js 3和2的可配置的,功能丰富的多重选择组件。

变更日志:

v1.3.6(03/30/2021)

  • 使用空格创建标签时,请删除多余的空格
  • 解决了有关刷新异步选项的问题
  • Android键盘修复

v1.3.5(03/21/2021)

  • 修复了使用单一模式时对空间的意外副作用

v1.3.4(03/14/2021)

  • 访问计算的选项内的值时的递归错误
  • 稍后加载选项时设置初始值

v1.3.3(03/13/2021)

  • 固定:选项标签更改时,所选项目的标签会更新
  • 固定:水平滚动修复
  • 添加了addTagOn,可以启用回车键和/或空格键来创建标签
  • 添加了必需的道具,该道具在多选旁边的假输入上呈现HTML5必需的属性
  • 添加了showOptions道具,如果有人只想拥有自由类型的标记列表,则该选项可以隐藏选项列表

v1.3.2(02/06/2021)

  • 标签广告位范围已使用 handleTagRemove 代替 remove

v1.3.1(02/05/2021)

  • 自述API修复。

v1.3.0(02/05/2021)

  • 添加了基于的Typescript定义
  • 为多个和标签模式添加了清除按钮
  • 添加了占位符插槽
  • 添加了正确的打开和关闭方法
  • 使用clearOnSearch解析时隐藏选项true
  • 添加了refreshOptions方法以刷新异步选项
  • 添加了API文档
  • 错误修复

v1.2.5(01/17/2021)

  • 在输入点击时关闭打开下拉菜单
  • 异步搜索修复后选择第一个选项
  • :options属性更改时更新选项

v1.2.4(01/12/2021)

  • 添加了:max属性

v1.2.3(12/29/2020)

  • Bug修复

v1.2.2(12/28/2020)

  • Bug修复
  • 添加了canDeselect选项

v1.2.1(12/23/2020)

  • 更改 v-model 将与多选值同步

v1.1.3(2020年12月20日)

  • Bug修复
  • 添加了更改事件
  • 破解:将hideSelectedTag重命名为hideSelected

更多功能:

  • 支持单选和多选。
  • 轻巧易用。
  • 实时搜索和过滤。
  • 还支持标记。

安装和下载:

# Yarn
$ yarn add @vueform/multiselect

# NPM
$ npm i @vueform/multiselect

用法:

1.导入多选组件及其样式表。

import Multiselect from '@vueform/multiselect'
<style src="@vueform/multiselect/themes/default.css"></style>

2.注册组件。

export default {
  components: {
    Multiselect,
  }
}

3.将多选组件添加到模板。

<Multiselect
  v-model="value"
  :options="options"
/>

4.将预定义选项添加到组件。

export default {
  components: {
    Multiselect,
  },
  data() {
    return {
      value: null,
      options: [
        'Vue',
        'Script',
        'Com',
      ]
    }
  }
}

5.可用的组件选项来自定义多个选择。

value: { // variable that should store the select value when using Vue 2
  required: false,
},
modelValue: {
  required: false,
},
options: { // list of options
  type: [Array, Object],
  required: false,
},
id: {
  type: [String, Number],
  required: false,
  default: 'multiselect',
},
name: {
  type: [String, Number],
  required: false,
  default: 'multiselect',
},
disabled: {
  type: Boolean,
  required: false,
  default: false,
},
label: {
  type: String,
  required: false,
  default: 'label',
},
trackBy: {
  type: String,
  required: false,
  default: 'label',
},
placeholder: {
  type: String,
  required: false,
  default: null,
},
mode: {
  type: String,
  required: false,
  default: 'single', // single|multiple|tags
},
searchable: {
  type: Boolean,
  required: false,
  default: false,
},
limit: {
  type: Number,
  required: false,
  default: -1,
},
maxHeight: {
  type: Number,
  required: false,
  default: 160,
},
hideSelectedTag: {
  type: Boolean,
  required: false,
  default: true,
},
createTag: {
  type: Boolean,
  required: false,
  default: false,
},
appendNewTag: {
  type: Boolean,
  required: false,
  default: true,
},
caret: {
  type: Boolean,
  required: false,
  default: true,
},
loading: { // shows loading spinner
  type: Boolean,
  required: false,
  default: false,
},
noOptionsText: {
  type: String,
  required: false,
  default: 'The list is empty',
},
noResultsText: {
  type: String,
  required: false,
  default: 'No results found',
},
multipleLabel: {
  type: Function,
  required: false,
},
object: { // sort values as an object
  type: Boolean,
  required: false,
  default: false,
},

6.事件。

  • @open:打开选项列表后。
  • @close:关闭选项列表后。
  • @select( option ):选择选项或标签后。
  • @deselect(option):取消选择选项或删除标签后。
  • @input(value):更改值后。
  • @ search-change(query):键入字符后。
  • @tag(query):创建新标签时,按下回车键。