Vant UI 二次封装 --下拉选择框
我希望是在页面中这样使用组件
对于日期选择框基本也可以这样做，只是我项目中暂时还可以用到，用到在封装。
vant框架的select下拉框
vant似乎没有直接提供传统的select下拉框，我的意思是，单行单元格然后点击出现下拉框，样式和其他input统一。
今天做了一下，记录一下子，以免后面忘记
1.需求 input focus下出现下拉框，选中选项后 值绑定给field
2.html部分 圆圈处是控制底部抽屉是否显示
3.data和methods部分
vant实现select效果，单选和多选
使用(建议全局注册)
|-confirm -- 点击完成按钮时触发 -- 单列：选中[整个数据]的值，选中值对应的索引，选中的value-|
|-cancel -- 点击取消按钮时触发 -- 单列：选中[整个数据]的值，选中值对应的索引，选中的value-|
|-change -- 选项改变时触发 -- 单列：选中[整个数据]的值，选中值对应的索引，选中的value-|
label-width ---------------------------label的一个宽度设置
label="单选select"---------------------label文字
:columns="columns"---------------------可选择的数据，只接受key-value格式的对象集合，[1,2,3]不可以
:option="{label:'name',value:'code'}"--数据的配置格式，默认label(显示的文字)，value（具体值）
|-confirm -- 点击完成按钮时触发 -- 单列：选中[整个数据]的值，选中值对应的索引，选中的value-|
|-cancel -- 点击取消按钮时触发 -- 单列：选中[整个数据]的值，选中值对应的索引，选中的value-|
|-change -- 选项改变时触发 -- 单列：选中[整个数据]的值，选中值对应的索引，选中的value-|
label-width ---------------------------label的一个宽度设置
label="单选select"---------------------label文字
:columns="columns"---------------------可选择的数据，只接受key-value格式的对象集合，[1,2,3]不可以
:option="{label:'name',value:'code'}"--数据的配置格式，默认label(显示的文字)，value（具体值）
微信小程序之vant组件自定义样式（外部样式）
vant 很多组件带自定义样式custom-class，方便使用者修改或者扩展。
本文以vant-cell修改背景色为例，说明自定义属性的使用。
xml引入vant-cell
原始效果如下图
xml申明custom-class属性
wxss实现具体的样式
效果如下图，背景色样式已经被修改了，