Select

表单组件 / Select选择组件

说明

如果在Select中使用了v-model指令时, Option中的checked属性将不起作用, 因为两者的使用逻辑是冲突的!

v-model是在Select组件中使用数据控制, 而checked是在Option中使用checked属性控制.

数据源

使用此组件建议使用固定数据而不是异步数据, 异步数据使用Alert组件完成.

如何引入

// 引入
import { Select, Option } from 'vimo/lib/select'
// 安装
Vue.component(Select.name, Select)
Vue.component(Option.name, Option)
// 或者
export default{
  src: {
    Select, Option
 }
}
源码:

传入属性 / 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

<vm-item>
   <vm-label>Gender</vm-label>
   <vm-select item-end placeholder="Select" interface="alert"
           @ onChange="onChange"
           @ onSelect="onSelect"
           @ onCancel="onCancel">
       <vm-option value="f" checked>Female</vm-option>
       <vm-option value="m">Male</vm-option>
   </vm-select>
</vm-item>

事件 / Events

onCancel

源码:

点击取消的时间

onChange

源码:
属性 / Properties:
Name Type Description
value any

变化值

值发生变化时触发

onSelect

源码:
属性 / Properties:
Name Type Description
value any

变化值

点击选择时触发