寻找IOS风格的datapicker在vue2下运行

 目前我们做的几个移动端项目,使用vue2多页面方式,js文件用<script>方式引入。因为不能使用import方式引入组件,这就意味着网上大量的VUE2第三方组件,无法使用。

我一般建议,VUE2尽量使用element-ui等嫡系UI,设计样式也尽量与element贴近。但是element缺少一些组件,比如IOS风格的日期选择器(下图)。
 
我花了几个小时寻找这个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 | 查看次数: 266
发表评论
昵 称:
密 码: 游客发言不需要密码.
邮 箱: 支持Gravatar头像.
网 址: 输入网址便于回访.
内 容:
验证码:
选 项:
虽然发表评论不用注册,但是为了保护您的发言权,建议您注册帐号.
字数限制 300 字 | UBB代码 关闭 | [img]标签 关闭