vue-virtual-selcet

一个vue2的虚拟列表选择器(virtual-select)

1.安装

npm install vue-virtual-selcet

2.注册

import virtualSelcet from "vue-virtual-selcet";
Vue.use(virtualSelcet);

3.使用

<template>
  <virtual-selcet
    v-model="val"
    style="width: 300px"
    @change="change"
    :options="options"
    placeholder="请选择"
    :filterMethod="filterMethod"
  />
</template>

Attributes

| 参数 | 说明 | 类型 | 默认值 | | ------------- | ------------------------------------------------------------ | ------------------ | ------------------------------------------------------------ | | options | select的选项,例:[{value:"值",label:"标签"}] | Array | [] | | placeholder | 占位符 | string | 请选择 | | filterable | 是否可搜索 | boolean | true | | filter-method | 自定义搜索方法 | function | function(val, optionList) { return optionList.filter((item) => item.label.toLowerCase().indexOf(val.toLowerCase()) == -1 ? false : true ); } | | data-key | 每个options数据对象中获取的唯一键,它的值必须是唯一,且类型为数字或者字符串 | string | function | function (option) { return option.value; } |

Events

| 事件名称 | 说明 | 回调参数 | | -------- | ----------------------- | -------------- | | change | 选中值发生变化时触发 | 目前的选中值 | | blur | 当 input 失去焦点时触发 | (event: Event) | | focus | 当 input 获得焦点时触发 | (event: Event) |