vant是有赞出的一个基于vue的组件库。
最近要作一个滚动选择日期的日历找到了它,感受文档不够细致,缺乏足够的demo代码。
如下是个人踩坑之处:vue
Events事件的绑定
*事件名 说明 回调参数 用法
change 当值变化时触发的事件 picker 实例 @change="changeXX"
confirm 点击完成按钮时触发的事件 当前 value @confirm="confirmXX"
cancel 点击取消按钮时触发的事件 - @cancel="cancelXX"*数组
change事件的注意事项
在change事件中,能够获取到picker实例,对picker进行相应的更新等操做:
*函数 说明
getColumnValue(index) 获取对应列中选中的值
setColumnValue(index, value) 设置对应列中选中的值
getColumnValues(index) 获取对应列中全部的备选值
setColumnValues(index, values) 设置对应列中全部的备选值
getValues() 获取全部列中被选中的值,返回一个数组
setValues(values) values为一个数组,设置全部列中被选中的值*函数
其中setColumnValue(index, value)和setColumnValues(index, values)必须一块儿使用。
一开始我只使用了setColumnValue设置选中值,结果发现当前选项内容改了可是其它选项所有消失,因此还得加上setColumnValues从新设置一遍被选值。
ps:change(picker){console.log(picker)}可查看实例详细信息。事件