表单组件 / Select选择组件
说明
如果在Select中使用了v-model指令时, Option中的checked属性将不起作用, 因为两者的使用逻辑是冲突的!
v-model是在Select组件中使用数据控制, 而checked是在Option中使用checked属性控制.
数据源
使用此组件建议使用固定数据而不是异步数据, 异步数据使用Alert组件完成.
如何引入
// 引入
import { Select, Option } from 'vimon'
// 安装
Vue.component(Select.name, Select)
Vue.component(Option.name, Option)
// 或者
export default{
components: {
Select, Option
}
}- 源码:
传入属性 / Props:
| Name | Type | Attributes | Default | Description |
|---|---|---|---|---|
cancelText |
String |
<optional> |
'取消'
|
cancel按钮显示文本 |
okText |
String |
<optional> |
'确认'
|
OK按钮显示文本 |
disabled |
Boolean |
<optional> |
'false'
|
OK按钮显示文本 |
interface |
String |
<optional> |
'alert'
|
显示界面类型, 可以是'action-sheet','alert', 'popover'三个 |
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:
- component:Select#event:onChange
- component:Select#event:onCancel
- component:Select#event:onSelect
用法 / Usages
<Item>
<Label>Gender</Label>
<Select item-end placeholder="Select" interface="alert"