如何基于Vue实现timepicker

这篇文章主要介绍如何基于Vue实现timepicker，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

公司主营业务：网站设计制作、成都网站制作、移动网站开发等业务。帮助企业客户真正实现互联网宣传，提高企业的竞争能力。创新互联是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化，感谢他们对我们的高要求，感谢他们从不同领域给我们带来的挑战，让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。创新互联推出正蓝免费做网站回馈大家。

vue是什么

Vue是一套用于构建用户界面的渐进式JavaScript框架，Vue与其它大型框架的区别是，使用Vue可以自底向上逐层应用，其核心库只关注视图层，方便与第三方库和项目整合，且使用Vue可以采用单文件组件和Vue生态系统支持的库开发复杂的单页应用。

主要用到的还是Vue的基本知识而已，不过要想到的细节很多。
先放效果，点击上框，显示timepicker。而且可以根据点击的是时还是分来改变圆盘的数字。

如何基于Vue实现timepicker

这里我用了两个组件，和，这里的时和分的数值我挂在了根实例中，因为两个组件都需要这两个值，所以想了想我决定还是挂在根实例，通过动态绑定到组件中。HTML见在线demo。

根组件

var app = new Vue({
 el: "#app",
 data: {
  minutes: 15,
  hour: 8,
  showTimePicker: false,
  current: 0  //0为时、1为分
 },
 created: function(){
  this.$on("closeTimePicker",function() {  //监听关闭time-picker
   this.showTimePicker = false;
  }),
  this.$on("openTimePicker",function() {
   this.showTimePicker = true;
  }),
  this.$on("getTime",function(h,m) {   //获取time-picker返回的点击后的数值，然后动态改变
   this.minutes = m;
   this.hour = h;
  })
 }
})

组件

点击时、分的时候，要“通知”根实例点击的是什么，下面的时钟才能显示相应的数字。改变父组件的属性，有两种办法，一是直接修改父组件属性；二是通过自定义事件。

Vue.component('time-box',{
 template:'\
  \
   {{hour}}\
    : \
   {{minutes}}\

', props: ['hour','minutes'], methods: { openTime: function() { app.$emit("openTimePicker"); }, changeCurrent: function(type) { if(type == 'h' ){ app.current = 0; } else { app.current = 1; } } } });

组件

这里最需要注意的就是单向数据流。时分是通过props传进来的，刚开始我直接操作this.hour，然后控制台警告。看到警告才想起看过的知识，这样很容易误改父组件的信息。所以啊，有些东西得实践才行，不能只看不敲。这里我定义一个局部 data 属性，并将 prop 的初始值作为局部数据的初始值。知识点：https://cn.vuejs.org/v2/guide/components.html#单向数据流

props: ['h','m','mode'],
data: function() {
 return {
  current: this.mode,
  hour: this.h,
  minutes: this.m
 }
},

正常情况下，如果时分不够两位数就要自动添加0，实现很简单的。刚开始直接判断是否小于10就添加。但是，“08”是小于10的，所以又自动添加0了。但是我觉得这里写得不好，还有改进的空间的。

//时分保证是两位数
fixHour: function() {
 return (this.hour < 10 && this.hour.toString().indexOf(0) !== 0) ? "0" + this.hour : this.hour
}
fixMinutes: function() {
 return (this.minutes < 10 && this.minutes.toString().indexOf(0) !== 0) ? "0" + this.minutes : this.minutes
},

再说说template里面的事吧。点击timepicker里面的时分改变组件的的current属性和透明度。这里显示数据就需要用到fixHour和fixMinutes了。


 {{fixHour(hour)}}
 :
 {{fixMinutes(minutes)}}

圆盘里的内容就靠v-for了。先定义好12个位置，然后遍历每个位置。里面的针就通过CSS3的旋转啦。一共360度，12个格，一小时60分钟，这么简单的数字知识就不继续说下去了，下面的乘法我相信各位是看得懂的。这里注意的是60，我们钟表没有60只有0啊，所以 ((5 * i) % 60 || “00”)。这里写得很有技巧。60%60是0。然后是||和&&的问题了（推荐两本书《你不知道的JavaScript》上中卷，内容跟《高级程序设计JS》也不怎么重复，值得看）。0强转为false，然后||就返回第二个操作数的值。



methods: {
 //分时针的样式
 selectorRotateAngle: function(i) {
  if(this.current === 0) {
   return {
    transform: 'rotateZ('+(this.hour * 30)+'deg)'
   }
  } else {
   return {
    transform: 'rotateZ('+(this.minutes * 6)+'deg)'
   }
  }
 },
 //12格样式
 getHourStyle: function(i) {
  var hasSelected = (this.current === 0 && this.hour % 12 === i)
    || (this.current === 1 && this.minutes % 60 == (i * 5));  //判断到底是哪个数值被选中
  var styleObj = {
   transform: 'translate(' + positions[i][0] + "px, " + positions[i][1] + "px)",
   background: hasSelected ? 'rgb(0, 188, 212)' : 'rgba(255, 255, 255, 0)',
   color: !hasSelected ? '#2c3e50' : '#FFF'
  }
  return styleObj;
 }
}

最后就是把选好的数值传回给父组件啦。

//关闭timepicker
closePicker: function() {
 app.$emit('closeTimePicker');
},
 //获取时间
getTime: function() {
 app.$emit('getTime',this.fixHour(this.hour),this.fixMinutes(this.minutes));
 app.$emit('closeTimePicker');
}

v-if和v-show

v-show只是改变每次的display，而v-if如果为true才渲染到页面，所以每次隐藏显示都重新渲染一遍。我觉得。。。如果实际中，经常要开开关关的就用v-show就好了，但是用来v-show我发现不能根据选中的是时还是分来展现数值，很奇怪，v-if就可以。刚开始觉得是初始化问题，但是，既然hour和minute能根据props传下来再data转化，为啥mode就不行呢？没想明白。

以上是“如何基于Vue实现timepicker”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！

文章题目：如何基于Vue实现timepicker
链接分享：http://cqcxhl.cn/article/jodggd.html

重庆分公司，新征程启航

如何基于Vue实现timepicker

vue是什么

其他资讯