基于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 相关文章推荐
兼容Mozilla必须知道的知识。
Jan 09 Javascript
重载toString实现JS HashMap分析
Mar 13 Javascript
关于div自适应高度/左右高度自适应一致的js代码
Mar 22 Javascript
js判断undefined变量类型使用typeof
Jun 03 Javascript
使用node.js半年来总结的 10 条经验
Aug 18 Javascript
js选项卡的实现方法
Feb 09 Javascript
JavaScript setTimeout使用闭包功能实现定时打印数值
Dec 18 Javascript
使用BootStrap进行轮播图的制作
Jan 06 Javascript
Vue开发之watch监听数组、对象、变量操作分析
Apr 25 Javascript
微信小程序非跳转式组件授权登录的方法示例
May 22 Javascript
vue实现tab栏点击高亮效果
Aug 19 Javascript
jQuery实现朋友圈查看图片
Sep 11 jQuery
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
php+mysql实现简单的增删改查功能
2015/07/13 PHP
解决php extension 加载顺序问题
2019/08/16 PHP
父窗口获取弹出子窗口文本框的值
2006/06/27 Javascript
JS网络游戏-(模拟城市webgame)提供的一些例子下载
2007/10/14 Javascript
Prototype String对象 学习
2009/07/19 Javascript
js string 转 int 注意的问题小结
2013/08/15 Javascript
了不起的node.js读书笔记之mongodb数据库交互
2014/12/22 Javascript
浅谈JavaScript function函数种类
2014/12/29 Javascript
jQuery简单实现QQ空间点赞已经取消点赞
2015/04/02 Javascript
Jquery全屏相册插件zoomvisualizer具有调节放大与缩小功能
2015/11/02 Javascript
基于jquery animate操作css样式属性小结
2015/11/27 Javascript
JavaScript实现字符串与日期的互相转换及日期的格式化
2016/03/07 Javascript
Bootstrap响应式侧边栏改进版
2016/09/17 Javascript
Node.js中process模块常用的属性和方法
2016/12/13 Javascript
解决React Native端口号修改的方法
2017/07/28 Javascript
JQuery Ajax动态加载Table数据的实例讲解
2018/08/09 jQuery
细说Vue组件的服务器端渲染的过程
2019/05/30 Javascript
Flutter部件内部状态管理小结之实现Vue的v-model功能
2019/06/11 Javascript
Vue实现导航栏菜单
2020/08/19 Javascript
Python实现TCP/IP协议下的端口转发及重定向示例
2016/06/14 Python
使用Python操作excel文件的实例代码
2017/10/15 Python
Python使用pylab库实现绘制直方图功能示例
2018/06/01 Python
Django网络框架之HelloDjango项目创建教程
2019/06/06 Python
Python Numpy 实现交换两行和两列的方法
2019/06/26 Python
python变量的存储原理详解
2019/07/10 Python
Python类中的魔法方法之 __slots__原理解析
2019/08/26 Python
win10系统Anaconda和Pycharm的Tensorflow2.0之CPU和GPU版本安装教程
2019/12/03 Python
Python 防止死锁的方法
2020/07/29 Python
个人找工作的自我评价
2013/10/17 职场文书
厂长助理岗位职责
2013/12/27 职场文书
个人授权委托书
2014/04/03 职场文书
学习十八大宣传标语
2014/10/09 职场文书
公安领导班子四风问题个人整改措施思想汇报
2014/10/09 职场文书
热血教师观后感
2015/06/10 职场文书
2019年干货:自我鉴定
2019/03/25 职场文书
pnpm对npm及yarn降维打击详解
2022/08/05 Javascript