在vue中实现picker样式_基于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;

})

}