# UPills 药丸 - [示例](#示例) - [基本用法](#基本用法) - [选择值](#选择值) - [只读、禁用、禁用某一项](#只读-禁用-禁用某一项) - [可取消](#可取消) - [多项选择](#多项选择) - [UPills API](#upills-api) - [Props/Attrs](#propsattrs) - [Slots](#slots) - [Events](#events) - [UPill API](#upill-api) - [Props/Attrs](#propsattrs-2) - [Slots](#slots-2) - [Events](#events-2) ## 示例 ### 基本用法 ``` html Apple Banana Cake ``` ### 选择值 ``` html Apple Banana Cake ``` ### 只读、禁用、禁用某一项 ``` html Apple Banana Cake Apple Banana Cake Apple Banana Cake ``` ### 可取消 点击两次同一项，可取消状态 ``` html Apple Banana Cake ``` ### 多项选择 绑定`value`属性，可以用`v-model`或`:value.sync`。 ``` html Apple Banana Cake ``` ## UPills API ### Props/Attrs | Prop/Attr | Type | Options | Default | Description | | --------- | ---- | ------- | ------- | ----------- | | data | Array\<{ text, value }\> | | | Data书写方式中的数据列表 | | value.sync, v-model | any | | | 当前选择的值 | | field | string | | `'text'` | 显示文本字段 | | cancelable | boolean | | `false` | 是否可以取消选择 | | multiple | boolean | | `false` | 是否可以多选 | | readonly | boolean | | `false` | 是否只读 | | disabled | boolean | | `false` | 是否禁用 | ### Slots #### (default) 插入``子组件。 ### Events #### @before-select 选择某一项前触发 | Param | Type | Description | | ----- | ---- | ----------- | | $event | object | 自定义事件对象 | | $event.value | any | 选择项的值 | | $event.oldValue | any | 旧的值 | | $event.item | object | 选择项相关对象 | | $event.itemVM | ListViewItem | 选择项子组件 | | $event.preventDefault | Function | 阻止选择流程 | #### @input 选择某一项时触发 | Param | Type | Description | | ----- | ---- | ----------- | | $event | any | 选择项的值 | #### @select 选择某一项时触发 | Param | Type | Description | | ----- | ---- | ----------- | | $event | object | 自定义事件对象 | | $event.value | any | 改变后的值 | | $event.oldValue | any | 旧的值 | | $event.item | object | 单选模式中，选择项相关对象 | | $event.itemVM | ListViewItem | 单选模式中，选择项子组件 | | $event.items | Array\ | 多选模式中，所有选中项相关对象的数组 | | $event.itemVMs | Array\ | 多选模式中，所有选中项子组件的数组 | ## UPill API ### Props/Attrs | Prop/Attr | Type | Options | Default | Description | | --------- | ---- | ------- | ------- | ----------- | | value | any | | | 此项的值 | | disabled | boolean | | `false` | 禁用此项 | | item | object | | | 相关对象。当选择此项时，抛出的事件会传递该对象，便于开发 | ### Slots #### (default) 插入文本或 HTML。 ### Events #### @before-select 选择此项前触发 | Param | Type | Description | | ----- | ---- | ----------- | | $event | object | 自定义事件对象 | | $event.value | any | 此项的值 | | $event.item | object | 此项的相关对象 | | $event.itemVM | ListViewItem | 此组件 | | $event.preventDefault | Function | 阻止选择流程 |