选择器与标签

自定义选择器，支持搜索、清除、分组、多选和创建标签（替代 bootstrap-select、select2 和 tagsinput）。完全支持键盘操作。

Select

Select

Vue

<div class="thl-row">
  <div class="thl-col-12 thl-col-md-6"><ThlField label="Single + search + clear" v-slot="{ id }"><ThlSelect :id="id" v-model="single" :options="countries" searchable clearable /></ThlField></div>
  <div class="thl-col-12 thl-col-md-6"><ThlField label="Multiple" v-slot="{ id }"><ThlSelect :id="id" v-model="multi" :options="countries" multiple clearable /></ThlField></div>
  <div class="thl-col-12 thl-col-md-6"><ThlField label="Creatable tags" v-slot="{ id }"><ThlSelect :id="id" v-model="tags" :options="tags.map((t) => ({ label: t, value: t }))" multiple creatable /></ThlField></div>
  <div class="thl-col-12 thl-col-md-6"><ThlField label="TagsInput" v-slot="{ id }"><ThlTagsInput :id="id" v-model="tags" /></ThlField></div>
</div>

React

<Select options={countries} value={single} onChange={setSingle} searchable clearable />
<Select options={countries} value={multi} onChange={setMulti} multiple clearable />
<Select options={tagOptions} value={tags} onChange={setTags} multiple creatable />
<TagsInput value={tags} onChange={setTags} />

Angular

<thl-select [(value)]="single" [options]="countries" [searchable]="true" [clearable]="true" />
<thl-select formControlName="countries" [options]="countries" multiple />
<thl-select [(ngModel)]="tags" [options]="tagOptions()" multiple creatable />

API

Select

<ThlSelect> · import { ThlSelect } from '@thl-ui/vue'

Prop	类型	默认值
modelValue	any	—
options*	array	—
multiple	boolean	—
searchable	boolean	—
clearable	boolean	—
creatable	boolean	—
placeholder	string	—
disabled	boolean	—
id	string	—
max	number	—

事件: update:modelValuechange

TagsInput

<ThlTagsInput> · import { ThlTagsInput } from '@thl-ui/vue'

Prop	类型	默认值
modelValue	array	—
placeholder	string	—
id	string	—

事件: update:modelValue