1.5 KiB
1.5 KiB
| title | preview |
|---|---|
| Selector 列表选择器 | https://didi.github.io/mand-mobile/examples/#/selector |
用于弹出列表中选择一项
引入
import { Selector } from 'mand-mobile'
Vue.component(Selector.name, Selector)
代码演示
API
Selector Props
| 属性 | 说明 | 类型 | 默认值 | 备注 |
|---|---|---|---|---|
| v-model | 选择器是否可见 | Boolean | false | - |
| data | 数据源 | Array<{value,text,...}> | [] |
label可为html片段 |
| default-index | 选择器初始选中项索引 | Number | - | - |
| invalid-index | 选择器不可用选项索引 | Number | - | - |
| title | 选择器标题 | String | - | - |
| ok-text | 选择器确认文案 | String | - | 若为空则为确认模式,即点击选项直接选择 |
| cancel-text | 选择器取消文案 | String | 取消 |
- |
| mask-closable1.3.0+ | 点击蒙层是否可关闭弹出层 | Boolean | true |
- |
| is-check | 是否有check图标 |
Boolean | false |
仅确认模式 |
| option-render | 返回各选项渲染内容 | Function({value, text ,...}):String | - | vue 2.1.0+可使用slot-scope,参考Radio |
| max-height1.3.0+ | 选择器内容区域最高高度, 超出后可滚动 | Number | 400 | 单位px |
Selector Events
@choose({value, text, ...})
选择器选中某选项事件
@confirm({value, text, ...})
选择器确认选中事件
@cancel()
选择器取消选中事件
@show()
选择器展示事件
@hide()
选择器隐藏事件