1.前言
- 官方的picker组件不能禁用某个下拉项，所以就有了这个下拉组件
- 组件只适配了宽屏模式，效果参照element-ui的select组件
2.封装思路
- 此组件使用了字体图标，素材来源于iconfont
- 组件分为3个部分：输入框容器，下拉容器，蒙版容器
- 输入框容器：展示已选中的选项，点击则展示下拉容器和蒙版容器
- 下拉容器：使用绝对定位，展示备选下拉项，以及相应的点击事件
- 蒙版容器：使用fixed定位，全屏覆盖，点击隐藏下拉容器和自身
3.基本用法
4.参数说明
| 参数 |
类型 |
默认值 |
说明 |
| value |
String，Number |
'' |
当前选中项的支持v-model |
| options |
Array |
[] |
下拉选项列表，disabled属性代表当前项禁用 |
| value_key |
String |
value |
指定 Object 中 key 的值作为选择器选中内容，以此同步给value属性 |
| label_key |
String |
label |
指定 Object 中 key 的值作为选择器展示内容 |
| 参数 |
类型 |
默认值 |
说明 |
| change |
EventHandle |
- |
下拉选择切换事件 |
5.完整代码
{{showLabel}}
{{item[label_key]}}
无数据