微信小程序重磅更新_基于Vue完成timepicker

2021-01-12 11:47 admin
基于Vue实现timepicker       这篇文章主要为大家详细介绍了基于Vue实现timepicker效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

在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 组件

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

ponent('time-box',{
 template:'\
 div @click="openTime" \
 span @click="changeCurrent(\'h\')" {{hour}} /span \
 span : /span \
 span @click="changeCurrent(\'m\')" {{minutes}} span/ \
 /div ',
 pro凡科抠图: ['hour','minutes'],
 methods: {
 openTime: function() {
 app.$emit("openTimePicker");
 changeCurrent: function(type) {
 if(type == 'h' ){
 app.current = 0;
 } else {
 app.current = 1;

time-picker 组件

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

pro凡科抠图: ['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 
 span @click="current = 0" : {{fixHour(hour)}} /span 
 span : /span 
 span @click="current = 1" : {{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 
 div : /div 
 span v-for="i in 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;

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能根据pro凡科抠图传下来再data转化,为啥mode就不行呢?没想明白。

在线demo:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。