1 | ---
|
2 | title: Selector 列表选择器
|
3 | preview: https://didi.github.io/mand-mobile/examples/#/selector
|
4 | ---
|
5 |
|
6 | 用于弹出列表中选择一项
|
7 |
|
8 | ### 引入
|
9 |
|
10 | ```javascript
|
11 | import { Selector } from 'mand-mobile'
|
12 |
|
13 | Vue.component(Selector.name, Selector)
|
14 | ```
|
15 |
|
16 | ### 代码演示
|
17 |
|
18 |
|
19 |
|
20 | ### API
|
21 |
|
22 | #### Selector Props
|
23 | |属性 | 说明 | 类型 | 默认值 | 备注|
|
24 | |----|-----|------|------|------|
|
25 | |v-model|选择器是否可见|Boolean|false|-|
|
26 | |data|数据源|Array<{value,text,disabled,...}>|`[]`|`text`可为`html`片段|
|
27 | |default-value <sup class="version-after">2.3.0+</sup>|选择器初始选中项的值|any|-|`multi`为`true`时,`default-value`应该传数组|
|
28 | |title|选择器标题|String|-|-|
|
29 | |describe|选择器描述|String|-|-|
|
30 | |ok-text|选择器确认文案|String|-|若为空则为`确认模式`,即点击选项直接选择|
|
31 | |cancel-text|选择器取消文案|String|`取消`|-|
|
32 | |large-radius <sup class="version-after">2.4.0+</sup>|选择器标题栏大圆角模式|Boolean|`false`|-|
|
33 | |hide-title-bar <sup class="version-after">2.4.0+</sup>|隐藏选择器标题栏|Boolean|`false`|-|
|
34 | |mask-closable|点击蒙层是否可关闭弹出层|Boolean|`true`|-|
|
35 | |is-check|是否有`check`图标|Boolean|`false`|仅`确认模式`|
|
36 | |max-height|选择器内容区域最高高度, 超出后可滚动|Number/String|`auto`|-|
|
37 | |min-height|选择器内容区域最小高度, 超出后可滚动|Number/String|`auto`|-|
|
38 | |icon|选中项的图标|String|`checked`|-|
|
39 | |icon-inverse|非选中项的图标|String|`check`|-|
|
40 | |icon-disabled|禁用项的图标|String|`check-disabled`|-|
|
41 | |icon-size|图标大小|String|`lg`|-|
|
42 | |icon-svg|使用svg图标|Boolean|`false`|-|
|
43 | |icon-position|图标位置|String|`right`|`left`, `right`|
|
44 | |multi<sup class="version-after">2.3.0+</sup>|支持多选|Boolean|`false`|`multi`为`true`时,`ok-text`不能为空|
|
45 |
|
46 | #### Selector Events
|
47 |
|
48 | #### @choose({value, text, ...})
|
49 | 选择器选中某选项事件
|
50 |
|
51 | #### @confirm({value, text, ...})
|
52 | 选择器确认选中事件
|
53 |
|
54 | #### @cancel()
|
55 | 选择器取消选中事件
|
56 |
|
57 | #### @show()
|
58 | 选择器展示事件
|
59 |
|
60 | #### @hide()
|
61 | 选择器隐藏事件
|
62 |
|
63 | #### Selector Slots
|
64 |
|
65 | ##### default
|
66 |
|
67 | ```html
|
68 | <md-selector>
|
69 | <template slot-scope="{ option, index, selected }">
|
70 | <div class="md-selector-custom-title">Hello, {{ option.text }}</div>
|
71 | </template>
|
72 | </md-selector>
|
73 | ```
|
74 |
|
75 | ##### header
|
76 |
|
77 | 顶部插槽 <sup class="version-after">2.4.0+</sup>
|
78 |
|
79 | ##### footer
|
80 |
|
81 | 底部插槽 <sup class="version-after">2.4.0+</sup> |
\ | No newline at end of file |