基于vue-bootstrap-typeahead二次开发组件,支持输入多个tag和tag的远程搜索组件。
需要vue-property-decorator, vue-class-component, bootstrap的b-form-tags全局注册
import { MultipleSearchInput } from 'multiple-search-input'
Vue . component ( 'MultipleSearchInput' , MultipleSearchInput )
import { multipleSearchInputPlugin } from 'multiple-search-input'
Vue . use ( multipleSearchInputPlugin ) ;
prop
type
description
limit
Number
限制tag的个数
list
{text: string; value: T}
下拉选择
options
{text: string; value: T}
初始下拉(当是远程搜索没有初始下拉选择时需要提供,不然value找不到对应显示的text值)
label
string
label
fieldClass
string
设置整体div的class
disabled
boolean
disabled
canFreeText
boolean
不检查是否在下拉内,可以直接新建tag
busy
boolean
使用无限滚动时翻页设置成true,load数据后改成false
infinite
boolean
是否采用无限滚动
handleValidate
(val: T) => boolean
控制能否加入tag内
value [v-model]
T[]
tag的value
event
type
description
fetch-data
(val: string) => void;
输入之后得到的值(可以在此调用远程搜索api)
fetch-more-data
(val: string) => void;
触发滚动到底部的时候触发
get-option
(val: {text: string; value: T}[]) => void;
获取当前已被选中的tag option(对于得不到初始option,在页面返回的时候可以在option中传入)
change[v-model]
(val: string[]) => void;