在github上看到的练习，看了遍代码后，按自己的思路再修改了一下。
先放原址：。
自己做的在线demo：
主要用到的还是vue的基本知识而已，不过要想到的细节很多。
先放效果，点击上框，显示timepicker。而且可以根据点击的是时还是分来改变圆盘的数字。
这里我用了两个组件，<time-box>和<time-picker>，这里的时和分的数值我挂在了根实例中，因为两个组件都需要这两个值，所以想了想我决定还是挂在根实例，通过动态绑定到组件中。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;
})
}
})
<time-box>组件
点击时、分的时候，要“通知”根实例点击的是什么，下面的时钟才能显示相应的数字。改变父组件的属性，有两种办法，一是直接修改父组件属性；二是通过自定义事件。
vue.component('time-box',{
template:'\
<div class="timebox" @click="opentime">\
<span @click="changecurrent(\'h\')">{{hour}}</span>\
<span> : </span>\
<span @click="changecurrent(\'m\')">{{minutes}}<span/>\
</div>',
props: ['hour','minutes'],
methods: {
opentime: function() {
app.$emit("opentimepicker");
},
changecurrent: function(type) {
if(type == 'h' ){
app.current = 0;
} else {
app.current = 1;
}
}
}
});
<time-picker>组件
这里最需要注意的就是单向数据流。时分是通过props传进来的，刚开始我直接操作this.hour，然后控制台警告。看到警告才想起看过的知识，这样很容易误改父组件的信息。所以啊，有些东西得实践才行，不能只看不敲。这里我定义一个局部 data 属性，并将 prop 的初始值作为局部数据的初始值。知识点：#单向数据流
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了。
<div class="showtime">
<span @click="current = 0" :style="{opacity: current == 0 ? 1 : 0.7}">{{fixhour(hour)}}</span>
<span>:</span>
<span @click="current = 1" :style="{opacity: current == 1 ? 1 : 0.7}">{{fixminutes(minutes)}}</span>
</div>
圆盘里的内容就靠v-for了。先定义好12个位置，然后遍历每个位置。里面的针就通过css3的旋转啦。一共360度，12个格，一小时60分钟，这么简单的数字知识就不继续说下去了，下面的乘法我相信各位是看得懂的。这里注意的是60，我们钟表没有60只有0啊，所以 ((5 * i) % 60 || “00”)。这里写得很有技巧。60%60是0。然后是||和&&的问题了（推荐两本书《你不知道的javascript》上中卷，内容跟《高级程序设计js》也不怎么重复，值得看）。0强转为false，然后||就返回第二个操作数的值。
<template>
<div class="hourpicker">
<div class="selector" :style="selectorrotateangle()"></div>
<span class="hourtxt" v-for="i in 12" :style="gethourstyle(i%12)" @click="current === 0 ? hour = i : minutes = ((5 * i) % 60 || \'00\')">{{current === 0 ? i : ((5 * i) % 60 || "00")}}</span>\
</div>
</template>
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就不行呢？没想明白。
在线demo：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问， 点击进行留言回复！！
vue组件传值,父子传值,子父传值,兄弟传值,组件主动获取数据及方法
vuex 多模块时 模块内部的mutation和action的调用方式
网友评论