vant 是有赞出的一个基于 vue 的组件库。
最近要做一个滚动选择日期的日历找到了它,感觉文档不够细致,缺少足够的 demo 代码。
以下是我的踩坑之处:
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)}可查看实例详细信息。