上一篇
下一篇
寻找IOS风格的datapicker在vue2下运行
作者:admin 日期:2017-05-06
目前我们做的几个移动端项目，使用vue2多页面方式，js文件用<script>方式引入。因为不能使用import方式引入组件，这就意味着网上大量的VUE2第三方组件，无法使用。
我一般建议，VUE2尽量使用element-ui等嫡系UI，设计样式也尽量与element贴近。但是element缺少一些组件，比如IOS风格的日期选择器（下图）。
.png)
我花了几个小时寻找这个datapicker组件，github、segmentfault，但没发现可用的第三方。山穷水尽之时，突然想起，这个组件最早出现在WEUI中，是否可以从WEUI提取？WEUI之前配合jquery使用，并没有跟VUE结合使用过，事后证明这只是我的一种错觉，WEUI本身是可以跟原生JS结合的，也就是说，可以跟VUE结合使用！
找到目标，开始写代码。但奇怪的是，datapicker没有完整的API官方文档，百度也查不到，最后还是通过谷歌翻墙，才找到答案。
WEUI的CSS还是容易改写的，我改写了部分CSS样式，以对应设计师的设计。
最后终于圆满解决！没有使用jquery。
主要代码如下：
methods:{
clickH:function (ii) {
var _dt = this.dtime;
weui.datePicker({
start:_dt[0][0],
end:_dt[1][0],
defaultValue: _dt[0],
onConfirm: function (result) {
Vue.set(_dt[ii], 0, result[0]); //年
Vue.set(_dt[ii], 1, result[1]); //月
Vue.set(_dt[ii], 2, result[2]); //日
}
});
},
inquireH:function () {
console.log('查询服务器');
}
},
data: {
pic:"images/bg1.jpg",
dtime:[
[2017,5,5], //日期选择器起始日期
[2017,5,10] //日期选择器最远可选日期
]
}
文章来自: 
引用通告: 
Tags: 
相关日志:
评论: 0 | 引用: 0 | 查看次数: 5282
发表评论
