表单组件 / Select选择组件
说明
如果在Select中使用了v-model指令时, Option中的checked属性将不起作用, 因为两者的使用逻辑是冲突的!
v-model是在Select组件中使用数据控制, 而checked是在Option中使用checked属性控制.
数据源
使用此组件建议使用固定数据而不是异步数据, 异步数据使用Alert组件完成.
如何引入
// 引入
import { Select, SelectOption } from 'vimo'
// 安装
Vue.component(Select.name, Select)
Vue.component(Option.name, SelectOption)
// 或者
export default{
components: {
Select, SelectOption
}
}- 源码:
传入属性 / Props:
| Name | Type | Attributes | Default | Description |
|---|---|---|---|---|
cancelText |
String |
<optional> |
'取消'
|
cancel按钮显示文本 |
cancelText |
String |
<optional> |
'确认'
|
OK按钮显示文本 |
disabled |
Boolean |
<optional> |
'false'
|
OK按钮显示文本 |
interface |
String |
<optional> |
'alert'
|
显示界面类型, 可以是'action-sheet','alert'两个 |
multiple |
Boolean |
<optional> |
'false'
|
单选多选,默认为单选 |
placeholder |
String |
<optional> |
当未选择时显示的值 | |
selectOptions |
Object |
<optional> |
select组件掉用alert和action-sheet组件的, 这个是针对传入的参数 title/subTitle/message/cssClass/enableBackdropDismiss等 | |
selectedText |
String |
<optional> |
选择组件的文本提示, 代替选择的option选项 | |
mode |
String |
<optional> |
'ios'
|
模式 |
value |
Object | String | Array |
<optional> |
'ios'
|
组件值 |
对外事件 / Fires:
用法 / Usages
<Item>
<Label>Gender</Label>
<Select item-right placeholder="Select" interface="alert"
@ onChange="onChange"
@ onSelect="onSelect"
@ onCancel="onCancel">
<Option value="f" checked>Female</Option>
<Option value="m">Male</Option>
</Select>
</Item>事件 / Events
onCancel
- 源码:
点击取消的时间
onChange
- 源码:
属性 / Properties:
| Name | Type | Description |
|---|---|---|
value |
any | 变化值 |
值发生变化时触发
onSelect
- 源码:
属性 / Properties:
| Name | Type | Description |
|---|---|---|
value |
any | 变化值 |
点击选择时触发