基于Vue实现timepicker


Posted in Javascript onApril 25, 2017

在github上看到的练习,看了遍代码后,按自己的思路再修改了一下。
先放原址:https://github.com/graysheeep/vue-material-timepicker。
自己做的在线demo:http://jsbin.com/dumace/2/edit?html,js,output

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

基于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 的初始值作为局部数据的初始值。知识点: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了。

<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-ifv-show

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

在线demo:http://jsbin.com/dumace/2/edit?html,js,output

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

Javascript 相关文章推荐
JS动画效果代码3
Apr 03 Javascript
下载站控制介绍字数显示的脚本 显示全部 隐藏介绍等功能
Sep 19 Javascript
Javascript this 的一些学习总结
Aug 02 Javascript
js字符串转换成数字与数字转换成字符串的实现方法
Jan 08 Javascript
编程语言JavaScript简介
Oct 16 Javascript
Node.js中HTTP模块与事件模块详解
Nov 14 Javascript
3种Jquery限制文本框只能输入数字字母的方法
Dec 03 Javascript
推荐6款基于jQuery实现图片效果插件
Dec 07 Javascript
JavaScript通过代码调用Flash显示的方法
Feb 02 Javascript
jQuery中的基本选择器用法学习教程
Apr 14 Javascript
用Vue.js实现监听属性的变化
Nov 17 Javascript
react系列从零开始_简单谈谈react
Jul 06 Javascript
VueJS如何引入css或者less文件的一些坑
Apr 25 #Javascript
详解Angular 4.x 动态创建组件
Apr 25 #Javascript
Angular 4.x中表单Reactive Forms详解
Apr 25 #Javascript
Angular 4.x 动态创建表单实例
Apr 25 #Javascript
AngularJS动态菜单操作指令
Apr 25 #Javascript
Angular.js 4.x中表单Template-Driven Forms详解
Apr 25 #Javascript
详解JS中的attribute属性
Apr 25 #Javascript
You might like
乱谈我对耳机、音箱的感受
2021/03/02 无线电
PHP生成带有雪花背景的验证码
2006/10/09 PHP
中篇:安装及配置PHP
2006/12/13 PHP
ThinkPHP使用UTFWry地址库进行IP定位实例
2014/04/01 PHP
php实现图片添加描边字和马赛克的方法
2014/12/10 PHP
php对文件进行hash运算的方法
2015/04/03 PHP
PHP的Yii框架的常用日志操作总结
2015/12/08 PHP
Yii2中简单的场景使用介绍
2017/06/02 PHP
详解PHP防止直接访问.php 文件的实现方法
2017/07/28 PHP
PHP时间函数使用详解
2019/03/21 PHP
javaScript对象和属性的创建方法
2007/01/15 Javascript
jquery创建并行对象或者合并对象的实现代码
2012/10/10 Javascript
IE6已终止操作问题的2种情况及解决
2014/04/23 Javascript
浅谈JavaScript function函数种类
2014/12/29 Javascript
jquery实现浮动的侧栏实例
2015/06/25 Javascript
jQuery实现带幻灯的tab滑动切换风格菜单代码
2015/08/27 Javascript
提升jQuery的性能需要做好七件事
2016/01/11 Javascript
js闭包引起的事件注册问题介绍
2016/03/29 Javascript
jquery html动态添加的元素绑定事件详解
2016/05/24 Javascript
全面解析vue中的数据双向绑定
2017/05/10 Javascript
JS实现小球的弹性碰撞效果
2017/11/11 Javascript
jQuery除指定区域外点击任何地方隐藏DIV功能
2017/11/13 jQuery
如何让微信小程序页面之间的通信不再变困难
2019/06/03 Javascript
Vue中实现权限控制的方法示例
2019/06/07 Javascript
微信小程序tabBar 返回tabBar不刷新页面
2019/07/25 Javascript
[38:23]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第一场
2014/05/24 DOTA
解决Python中由于logging模块误用导致的内存泄露
2015/04/23 Python
python中logging包的使用总结
2018/02/28 Python
python+opencv实现高斯平滑滤波
2020/07/21 Python
对python读取zip压缩文件里面的csv数据实例详解
2019/02/08 Python
python爬虫 urllib模块url编码处理详解
2019/08/20 Python
python计算二维矩形IOU实例
2020/01/18 Python
pytorch 查看cuda 版本方式
2020/06/23 Python
学习两会精神心得范文
2014/03/17 职场文书
综合素质评价个性发展自我评价
2015/03/06 职场文书
2015年为民办实事工作总结
2015/05/26 职场文书