Vue.js最完整的选择解决方案– vue-multiselect

Vue.js最完整的选择解决方案– vue-multiselect
插件名称 vue-multiselect
发布时间 2020年6月12日
插件作者 monterail

Vue.js 1.x和2.x的通用选择/多重选择/标记组件。

特点

  • 没有依赖
  • 单选
  • 多选
  • 标记
  • 自定义选项模板(1.1.0+)
  • 下拉菜单
  • 筛选
  • 搜索建议
  • 逻辑分为混合
  • 基本组件和对自定义组件的支持
  • Vuex支持
  • 异步选项支持
  • > 99%的测试覆盖率
  • 完全可配置(请参见下面的道具列表)

安装和下载:

npm install vue-multiselect

基本用法:

1.导入组件。

import Multiselect from 'vue-multiselect'

2.在您的应用模板中:

<template>
  <div>
    <multiselect
      v-model="selected"
      :options="options">
    </multiselect>
  </div>
</template>

3.注册组件并为多选定义选项数组。

export default {
  components: { Multiselect },
  data () {
    return {
      selected: null,
      options: ['vue', 'script', 'com']
    }
  }
}

4.可用的props来自定义多重选择组件。

/**
 * 属性,以匹配可选标签元素
 * @default ''
 * @type {String}
 */
name: {
  type: String,
  default: ''
},
/**
 * 当指向一个选项时显示的字符串
 * @default '按回车键选择'
 * @type {String}
 */
selectLabel: {
  type: String,
  default: '按回车键选择'
},
/**
 * 当指向一个选项时显示的字符串
 * @default '按回车键选择'
 * @type {String}
 */
selectGroupLabel: {
  type: String,
  default: '按enter键选择组'
},
/**
 * 要显示在所选选项旁边的字符串
 * @default 'Selected'
 * @type {String}
 */
selectedLabel: {
  type: String,
  default: 'Selected'
},
/**
 * 当指向一个已经选择的选项时显示的字符串
 * @default '按回车删除'
 * @type {String}
 */
deselectLabel: {
  type: String,
  default: '按回车删除'
},
/**
 * 当指向一个已经选择的选项时显示的字符串
 * @default '按回车删除'
 * @type {String}
 */
deselectGroupLabel: {
  type: String,
  default: '按回车取消选择组'
},
/**
 * 决定是否显示指针标签
 * @default true
 * @type {Boolean}
 */
showLabels: {
  type: Boolean,
  default: true
},
/**
 * 限制显示所选选项。其余的将隐藏在limitText字符串中。
 * @default 99999
 * @type {Integer}
 */
limit: {
  type: Number,
  default: 99999
},
/**
 * 设置下拉列表的maxHeight样式值
 * @default 300
 * @type {Integer}
 */
maxHeight: {
  type: Number,
  default: 300
},
/**
 * 处理选中时显示的消息的函数
 * 元素通过定义的限制。
 * @default 'and * more'
 * @param {Int} count Number of elements more than limit
 * @type {Function}
 */
limitText: {
  type: Function,
  default: count => `and ${count} more`
},
/**
 * 设置为true以触发加载转轮。
 * @default False
 * @type {Boolean}
 */
loading: {
  type: Boolean,
  default: false
},
/**
 * 如果为真,将禁用多选。
 * @default false
 * @type {Boolean}
 */
disabled: {
  type: Boolean,
  default: false
},
/**
 * 固定孔的方向
 * @default ''
 * @type {String}
 */
openDirection: {
  type: String,
  default: ''
},
/**
 * 显示关于空选项的消息槽
 * @default true
 * @type {Boolean}
 */
showNoOptions: {
  type: Boolean,
  default: true
},
showNoResults: {
  type: Boolean,
  default: true
},
tabindex: {
  type: Number,
  default: 0
}