基于Vue实现timepicker

 更新时间:2017年04月25日 15:03:27   作者:傲娇的黄同学  
这篇文章主要为大家详细介绍了基于Vue实现timepicker效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

主要用到的还是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

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

相关文章

  • Vue组件通信方式(父传子、子传父、兄弟通信)

    Vue组件通信方式(父传子、子传父、兄弟通信)

    这篇文章主要介绍了Vue组件通信方式(父传子、子传父、兄弟通信),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-05-05
  • vue+Element实现分页效果

    vue+Element实现分页效果

    这篇文章主要为大家详细介绍了vue+Element实现分页效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • 解决vue前后端端口不一致的问题

    解决vue前后端端口不一致的问题

    这篇文章主要介绍了解决vue前后端端口不一致的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2021-07-07
  • 解决vue3.0运行项目warning Insert `·` prettier/prettier问题

    解决vue3.0运行项目warning Insert `·` prettier/pret

    这篇文章主要介绍了解决vue3.0运行项目warning Insert `·` prettier/prettier问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • vue3使用el-table实现新旧数据对比的代码详解

    vue3使用el-table实现新旧数据对比的代码详解

    这篇文章主要为大家详细介绍了在vue3中使用el-table实现新旧数据对比,文中的示例代码讲解详细,具有一定的参考价值,需要的小伙伴可以参考一下
    2023-12-12
  • 详解Vue iview IE浏览器不兼容报错(Iview Bable polyfill)

    详解Vue iview IE浏览器不兼容报错(Iview Bable polyfill)

    这篇文章主要介绍了Vue iview IE浏览器不兼容报错的决绝方法,由于Iview编译使用到了es6的一些新特性,但是在IE中不支持ES6的新特性,本文就介绍一下如何解决这些问题
    2019-01-01
  • 如何在vue中使用jointjs过程解析

    如何在vue中使用jointjs过程解析

    这篇文章主要介绍了如何在vue中使用jointjs过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-05-05
  • Vue3新状态管理工具实例详解

    Vue3新状态管理工具实例详解

    Vue3公布曾经有一段时间了,它采纳了新的响应式零碎,而且构建了一套全新的 Composition API,下面这篇文章主要给大家介绍了关于Vue3新状态管理工具的相关资料,需要的朋友可以参考下
    2022-03-03
  • vue2.x+webpack快速搭建前端项目框架详解

    vue2.x+webpack快速搭建前端项目框架详解

    本文给大家介绍了vue2.x、webpack、vuex、sass+axios、elementUI等快速搭建前端项目框架的详细操作方法,需要的跟着学习下吧。
    2017-11-11
  • el-table渲染慢卡顿问题最优解决方案

    el-table渲染慢卡顿问题最优解决方案

    本文主要介绍了el-table渲染慢卡顿问题最优解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-08-08

最新评论