功能丰富的Vue 3/2的多选组件

一个可配置的、功能丰富的多选组件，适用于Vue.js 3和2。

更多特点。

• 同时支持单选和多选。
• 轻量级且易于使用。
• 实时搜索和过滤。
• 也支持标签。

基本使用方法。

1.导入多选组件和它的样式表。

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

2.2.注册该组件。

export default {
  components: {
    Multiselect,
  }
}

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

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

4.4.为组件添加预定义的选项。这就是了。

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

5.可用组件选项来定制多选。

value: {
  required: false,
},
modelValue: {
  required: false,
},
options: {
  type: [Array, Object, Function],
  required: false,
  default: () => ([])
},
id: {
  type: [String, Number],
  required: false,
},
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: undefined,
},
valueProp: {
  type: String,
  required: false,
  default: 'value',
},
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,
},
hideSelected: {
  type: Boolean,
  required: false,
  default: true,
},
createTag: {
  type: Boolean,
  required: false,
  default: undefined,
},
createOption: {
  type: Boolean,
  required: false,
  default: undefined,
},
appendNewTag: {
  type: Boolean,
  required: false,
  default: undefined,
},
appendNewOption: {
  type: Boolean,
  required: false,
  default: undefined,
},
addTagOn: {
  type: Array,
  required: false,
  default: undefined,
},
addOptionOn: {
  type: Array,
  required: false,
  default: undefined,
},
caret: {
  type: Boolean,
  required: false,
  default: true,
},
loading: {
  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: {
  type: Boolean,
  required: false,
  default: false,
},
delay: {
  type: Number,
  required: false,
  default: -1,
},
minChars: {
  type: Number,
  required: false,
  default: 0,
},
resolveOnLoad: {
  type: Boolean,
  required: false,
  default: true,
},
filterResults: {
  type: Boolean,
  required: false,
  default: true,
},
clearOnSearch: {
  type: Boolean,
  required: false,
  default: false,
},
clearOnSelect: {
  type: Boolean,
  required: false,
  default: true,
},
canDeselect: {
  type: Boolean,
  required: false,
  default: true,
},
canClear: {
  type: Boolean,
  required: false,
  default: true,
},
max: {
  type: Number,
  required: false,
  default: -1,
},
showOptions: {
  type: Boolean,
  required: false,
  default: true,
},
required: {
  type: Boolean,
  required: false,
  default: false,
},
openDirection: {
  type: String,
  required: false,
  default: 'bottom',
},
nativeSupport: {
  type: Boolean,
  required: false,
  default: false,
},
classes: {
  type: Object,
  required: false,
  default: () => ({})
},
strict: {
  type: Boolean,
  required: false,
  default: true,
},
closeOnSelect: {
  type: Boolean,
  required: false,
  default: true,
},
autocomplete: {
  type: String,
  required: false,
},
groups: {
  type: Boolean,
  required: false,
  default: false,
},
groupLabel: {
  type: String,
  required: false,
  default: 'label',
},
groupOptions: {
  type: String,
  required: false,
  default: 'options',
},
groupHideEmpty: {
  type: Boolean,
  required: false,
  default: false,
},
groupSelect: {
  type: Boolean,
  required: false,
  default: true,
},
inputType: {
  type: String,
  required: false,
  default: 'text',
},
attrs: {
  required: false,
  type: Object,
  default: () => ({}),
},
onCreate: {
  required: false,
  type: Function,
},
disabledProp: {
  type: String,
  required: false,
  default: 'disabled',
},
searchStart: {
  type: Boolean,
  required: false,
  default: false,
},
reverse: {
  type: Boolean,
  required: false,
  default: false,
},
regex: {
  type: [Object, String, RegExp],
  required: false,
  default: undefined,
},
rtl: {
  type: Boolean,
  required: false,
  default: false,
},
infinite: {
  type: Boolean,
  required: false,
  default: false,
},

6.事件。

• **@open：**打开选项列表后。
• **@close:**关闭选项列表后。
• **@select(option)：**在一个选项或标签被选中后。
• @deselect(option)：在一个选项被取消选择或一个标签被移除之后。
• **@change(value):**在值被改变之后。
• @search-change(query): 在输入一个字符之后。
• @tag(query): 在创建一个新的标签时，点击回车后。
• **@clear:**当选项被清除时。

预览。

更新日志。

v2.5.3 (09/22/2022)

• A11y的改进。

v2.5.2 (07/23/2022)

• 对tailwind.css的修复。

v2.5.1 (07/11/2022)

• 兼容Vue.js 2.7

v2.4.0 (05/30/2022)

• 增加了无障碍（a11y）支持
• 增加了无限滚动
• 增加RTL支持
• 如果打开，点击即关闭
• 可搜索时为输入添加ID
• 如果关闭，在箭头和搜索类型上重新打开输入
• 选择时关闭下拉菜单而不是模糊
• 增加了重词选项
• 打开时滚动到第一个选择
• 当openPosition: true时，选项不被反转
• 添加了反转选项。
• 添加了searchStart选项
• 添加了disabledProp选项
• 添加了onCreate选项
• 添加了select$作为事件和异步选项的第二个参数
• 为选项槽范围添加了isSelected和isPointed。
• 错误修正

v2.3.4 (05/11/2022)

• 异步选项变更检测。
• 标签道具变化检测。
• 选项和标签文本可以包含HTML。

v2.3.3 (02/26/2022)

• 增加了attrs道具。

v2.3.2 (02/06/2022)

• 错误修正

v2.3.1 (12/16/2021)

• 废弃了：appendNewTag, createTag, addTagOn道具和@tag事件。
• 增加了appendNewOption、createOption、addOptionOn道具和@option事件。
• 增加了selectAll方法。
• trackBy道具现在默认为标签。
• 当选项被选中时，取代了对搜索的关注。
• 为带有singleLabelText类键的单个标签添加了包装器。
• 错误修正

The postFeature-rich Multiple Select Component For Vue 3/2appeared first onVue Script.