这篇文章主要介绍如何基于Vue实现timepicker，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
Vue是一套用于构建用户界面的渐进式JavaScript框架，Vue与其它大型框架的区别是，使用Vue可以自底向上逐层应用，其核心库只关注视图层，方便与第三方库和项目整合，且使用Vue可以采用单文件组件和Vue生态系统支持的库开发复杂的单页应用。
主要用到的还是Vue的基本知识而已，不过要想到的细节很多。
先放效果，点击上框，显示timepicker。而且可以根据点击的是时还是分来改变圆盘的数字。
这里我用了两个组件，
根组件
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传进来的，刚开始我直接操作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了。