Vue.js的自定义高级选择组件 - vue-advanced-select

Vue.js的自定义高级选择组件 - vue-advanced-select
插件名称 advanced-select
版本号 v1.0.1
发布时间 2020年5月16日
插件作者 myENA

一个组件,用于通过Vue和Bootstrap构建的Web应用程序通过高级交互(搜索,全选/取消全选等)呈现“选择”。

安装和下载:

# NPM
$ npm install @myena/advanced-select --save

使用:

选项可以作为props传递

<AdvancedSelect
  v-model="value"
  :options="options"
  :disabled="disabled"
  />

或作为默认slot

<AdvancedSelect
  v-model="secondValue"
  :disabled="disabled"
  >
  <option value="1">Text</option>
  <option value="2">Text 2</option>
</AdvancedSelect>
import AdvancedSelect from 'advanced-select';

export default {
  components: {
    AdvancedSelect,
  },
  data: () => ({
    options: [
      { value: 1, text: 'One' },
      { value: 2, text: 'Two' },
    ],
    value: null,
    secondValue: '1',
    disabled: false,
  }),
};

Props

Prop 类型 默认值 描述
v-model any null 传递 v-model 给组件以引用当前所选值
:options Array [] 显示的选项。形式为的对象列表: { value: 1, text: 'One' } 或{ label: 'Group 1', options: [ { value: 1, text: 'One' } ]. 。如果未作为prop传递,它将尝试从组件默认插槽读取它们,可以将它们指定为HTML标准`option。
:search Boolean false 显示或不显示搜索字段以过滤选项
:multiple Boolean false 单选或多选
:controls Boolean false 在顶部显示或不显示几个控制按钮,用于(取消)选择所有项目
:collapseHeaders Boolean false 在标题上显示或不显示链接以切换标题下的项目
:displayMax Number 0 在多种模式下,要在按钮上显示多少个选定项目。0表示全部
:displayText String "{0} items selected" 到达时显示的文字 displayMax 。“ {0}”将替换为总数
:dropdownClass String '' 下拉菜单要使用的类。例如: 'dropdown-menu-right'
:texts Object { placeholder: 'Nothing selected', empty: 'No results', selectAll: 'Select all', selectNone: 'Select none', } 使用的文字

变更日志:

v1.0.1(04/20/2021)

  • 更改页面时未选择固定值。

v1.0.0(04/04/2021)

  • 使用组修复多个选定内容

v0.9.3(01/27/2021)

  • 确保原始选项列表不变

v0.9.2(01/12/2021)

  • 在选项内添加所选值

v0.9.1(12/16/2020)

  • 转义搜索字符

v0.9.0(12/09/2020)

  • 将分隔符包裹在一个跨度中,以便在不需要时可以将其隐藏

v0.8.9(2020年12月12日)

  • 存储全选的唯一值