在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; }}最后就是把選好的數值傳回給父組件啦。
//關閉timepickerclosePicker: function() { app.$emit('closeTimePicker');}, //獲取時間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能根據props傳下來再data轉化，為啥mode就不行呢？沒想明白。
在線demo：http://jsbin.com/dumace/2/edit?html,js,output
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
