快捷導(dǎo)航

基于Vue實(shí)現(xiàn)timepicker

更新時(shí)間：2017年04月25日 15:03:27 作者：傲嬌的黃同學(xué)

這篇文章主要為大家詳細(xì)介紹了基于Vue實(shí)現(xiàn)timepicker效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

在github上看到的練習(xí)，看了遍代碼后，按自己的思路再修改了一下。
先放原址：https://github.com/graysheeep/vue-material-timepicker。
自己做的在線demo：http://jsbin.com/dumace/2/edit?html,js,output

主要用到的還是Vue的基本知識(shí)而已，不過(guò)要想到的細(xì)節(jié)很多。
先放效果，點(diǎn)擊上框，顯示timepicker。而且可以根據(jù)點(diǎn)擊的是時(shí)還是分來(lái)改變圓盤的數(shù)字。

這里我用了兩個(gè)組件，<time-box>和<time-picker>，這里的時(shí)和分的數(shù)值我掛在了根實(shí)例中，因?yàn)閮蓚€(gè)組件都需要這兩個(gè)值，所以想了想我決定還是掛在根實(shí)例，通過(guò)動(dòng)態(tài)綁定到組件中。HTML見(jiàn)在線demo。

根組件

var app = new Vue({
 el: "#app",
 data: {
  minutes: 15,
  hour: 8,
  showTimePicker: false,
  current: 0  //0為時(shí)、1為分
 },
 created: function(){
  this.$on("closeTimePicker",function() {  //監(jiān)聽(tīng)關(guān)閉time-picker
   this.showTimePicker = false;
  }),
  this.$on("openTimePicker",function() {
   this.showTimePicker = true;
  }),
  this.$on("getTime",function(h,m) {   //獲取time-picker返回的點(diǎn)擊后的數(shù)值，然后動(dòng)態(tài)改變
   this.minutes = m;
   this.hour = h;
  })
 }
})

<time-box>組件

點(diǎn)擊時(shí)、分的時(shí)候，要“通知”根實(shí)例點(diǎn)擊的是什么，下面的時(shí)鐘才能顯示相應(yīng)的數(shù)字。改變父組件的屬性，有兩種辦法，一是直接修改父組件屬性；二是通過(guò)自定義事件。

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>組件

這里最需要注意的就是單向數(shù)據(jù)流。時(shí)分是通過(guò)props傳進(jìn)來(lái)的，剛開(kāi)始我直接操作this.hour，然后控制臺(tái)警告?？吹骄娌畔肫鹂催^(guò)的知識(shí)，這樣很容易誤改父組件的信息。所以啊，有些東西得實(shí)踐才行，不能只看不敲。這里我定義一個(gè)局部 data 屬性，并將 prop 的初始值作為局部數(shù)據(jù)的初始值。知識(shí)點(diǎn)：https://cn.vuejs.org/v2/guide/components.html#單向數(shù)據(jù)流

props: ['h','m','mode'],
data: function() {
 return {
  current: this.mode,
  hour: this.h,
  minutes: this.m
 }
},

正常情況下，如果時(shí)分不夠兩位數(shù)就要自動(dòng)添加0，實(shí)現(xiàn)很簡(jiǎn)單的。剛開(kāi)始直接判斷是否小于10就添加。但是，“08”是小于10的，所以又自動(dòng)添加0了。但是我覺(jué)得這里寫得不好，還有改進(jìn)的空間的。

//時(shí)分保證是兩位數(shù)
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
},

再說(shuō)說(shuō)template里面的事吧。點(diǎn)擊timepicker里面的時(shí)分改變組件的的current屬性和透明度。這里顯示數(shù)據(jù)就需要用到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>

圓盤里的內(nèi)容就靠v-for了。先定義好12個(gè)位置，然后遍歷每個(gè)位置。里面的針就通過(guò)CSS3的旋轉(zhuǎn)啦。一共360度，12個(gè)格，一小時(shí)60分鐘，這么簡(jiǎn)單的數(shù)字知識(shí)就不繼續(xù)說(shuō)下去了，下面的乘法我相信各位是看得懂的。這里注意的是60，我們鐘表沒(méi)有60只有0啊，所以 ((5 * i) % 60 || “00”)。這里寫得很有技巧。60%60是0。然后是||和&&的問(wèn)題了（推薦兩本書(shū)《你不知道的JavaScript》上中卷，內(nèi)容跟《高級(jí)程序設(shè)計(jì)JS》也不怎么重復(fù)，值得看）。0強(qiáng)轉(zhuǎn)為false，然后||就返回第二個(gè)操作數(shù)的值。

<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: {
 //分時(shí)針的樣式
 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));  //判斷到底是哪個(gè)數(shù)值被選中
  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;
 }
}

最后就是把選好的數(shù)值傳回給父組件啦。

//關(guān)閉timepicker
closePicker: function() {
 app.$emit('closeTimePicker');
},
 //獲取時(shí)間
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才渲染到頁(yè)面，所以每次隱藏顯示都重新渲染一遍。我覺(jué)得。。。如果實(shí)際中，經(jīng)常要開(kāi)開(kāi)關(guān)關(guān)的就用v-show就好了，但是用來(lái)v-show我發(fā)現(xiàn)不能根據(jù)選中的是時(shí)還是分來(lái)展現(xiàn)數(shù)值，很奇怪，v-if就可以。剛開(kāi)始覺(jué)得是初始化問(wèn)題，但是，既然hour和minute能根據(jù)props傳下來(lái)再data轉(zhuǎn)化，為啥mode就不行呢？沒(méi)想明白。

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: