Vue 3/2 多选组件 - multiselect

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

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

更多功能:

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

安装和下载:

# 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):创建新标签时,按下回车键。

变更日志:

v2.0.1 (06/28/2021)

  • 类名修复。

v2.0.0 (06/21/2021)

  • 突破:完全重写 <template> 和 default.css。
  • 添加了 CSS 变量支持以简化样式。
  • 添加了对实用程序类的支持,例如 TailwindCSS。
  • 现在总是在 caret: true 时显示 Caret,无论多选是否选择了选项。
  • 添加 canDeselect 和 classes 道具。
  • 添加 ; 和 , addTagOn 道具的选项。

v1.5.0 (05/18/2021)

  • 添加了原生输入支持
  • 添加了 openDirection 道具
  • 添加选项作为选择和取消选择事件的第二个参数
  • 添加@clear事件
  • 清除图标 CSS 修复
  • 修复了当 canDeselect 为 false 时意外出现的清除按钮

v1.4.0 (04/06/2021)

  • 数组选项不再被视为对象,但选项值和标签都将等于数组项值。例如。option: [‘v1′,’v2’] 过去等于 {0: ‘v1’, 1: ‘v2’},现在它们等于 {v1: ‘v1’, v2: ‘v2’}。
  • 优化变量名称以降低包大小。

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