资讯专栏INFORMATION COLUMN

vant DatetimePicker 踩坑笔记

sihai / 2193人阅读

摘要:是有赞出的一个基于的组件库。最近要做一个滚动选择日期的日历找到了它,感觉文档不够细致,缺少足够的代码。一开始我只使用了设置选中值,结果发现当前选项内容改了但是其它选项全部消失,所以还得加上重新设置一遍被选值。可查看实例详细信息。

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)}可查看实例详细信息。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/104261.html

相关文章

  • 记 vue 移动端开发 中的经验(2)

    摘要:官网还不断的访问不了。在此推荐一个移动端库按需引入二次封装组件列表的下拉刷新和上拉加载更多是移动端必须的组件。不用写死高度了,并且兼容对外提供了更加简明易用的刷新,回到顶部,获得和设置滚动条位置的方法统一的提示,免去重复代码。 按需引入mint-ui 本项目用了 mint-ui 作为基础ui框架,在使用中遇到不少问题。官网doc 还不断的访问不了。不过还是很感谢 mint-ui 团队。...

    Flands 评论0 收藏0
  • 关于Vue2一些值得推荐的文章 -- 五、六月份

    摘要:五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新,欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香,消溽暑。鸟雀呼晴,侵晓窥檐语。叶上初阳乾宿雨,水面清圆,一一风荷举。家住吴门,久作长安旅。五月渔郎相忆否。小楫轻舟,梦入芙蓉浦。 五、六月份推荐集合 查看github最新的Vue weekly;请::点击::集web前端最近很火的vue2框架资源;定时更新,欢迎 Star 一下。 苏...

    sutaking 评论0 收藏0
  • 关于Vue2一些值得推荐的文章 -- 五、六月份

    摘要:五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新,欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香,消溽暑。鸟雀呼晴,侵晓窥檐语。叶上初阳乾宿雨,水面清圆,一一风荷举。家住吴门,久作长安旅。五月渔郎相忆否。小楫轻舟,梦入芙蓉浦。 五、六月份推荐集合 查看github最新的Vue weekly;请::点击::集web前端最近很火的vue2框架资源;定时更新,欢迎 Star 一下。 苏...

    khs1994 评论0 收藏0
  • bootstrap datetimepicker日期插件美化

    摘要:需求日期面板默认展开可以根据点击的日期,处理额外的信息,如在这天记录一些信息等大部分的日期插件日期面板是隐藏的,点击的时候日期面板显示,基于的日期插件如果是在元素上实例化插件的情况,面板是显示的,在上面板则是隐藏的。 需求: (1)日期面板默认展开 (2)可以根据点击的日期,处理额外的信息,如在这天记录一些信息等 大部分的日期插件日期面板是隐藏的,点击input的时候日期面板显示,基于...

    ninefive 评论0 收藏0

发表评论

0条评论

sihai

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<