我欲封天,辰东完美世界有声小说,殿上欢

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

如何基于Vue實現(xiàn)timepicker-創(chuàng)新互聯(lián)

這篇文章主要介紹如何基于Vue實現(xiàn)timepicker，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

我們提供的服務(wù)有：網(wǎng)站制作、做網(wǎng)站、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、南城ssl等。為上千家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的南城網(wǎng)站制作公司

vue是什么

Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架，Vue與其它大型框架的區(qū)別是，使用Vue可以自底向上逐層應(yīng)用，其核心庫只關(guān)注視圖層，方便與第三方庫和項目整合，且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫開發(fā)復(fù)雜的單頁應(yīng)用。

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

如何基于Vue實現(xiàn)timepicker

這里我用了兩個組件，和，這里的時和分的數(shù)值我掛在了根實例中，因為兩個組件都需要這兩個值，所以想了想我決定還是掛在根實例，通過動態(tài)綁定到組件中。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() {  //監(jiān)聽關(guān)閉time-picker
   this.showTimePicker = false;
  }),
  this.$on("openTimePicker",function() {
   this.showTimePicker = true;
  }),
  this.$on("getTime",function(h,m) {   //獲取time-picker返回的點擊后的數(shù)值，然后動態(tài)改變
   this.minutes = m;
   this.hour = h;
  })
 }
})

組件

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

Vue.component('time-box',{
 template:'\
  \
   {{hour}}\
    : \
   {{minutes}}\

', props: ['hour','minutes'], methods: { openTime: function() { app.$emit("openTimePicker"); }, changeCurrent: function(type) { if(type == 'h' ){ app.current = 0; } else { app.current = 1; } } } });

組件

這里最需要注意的就是單向數(shù)據(jù)流。時分是通過props傳進(jìn)來的，剛開始我直接操作this.hour，然后控制臺警告?？吹骄娌畔肫鹂催^的知識，這樣很容易誤改父組件的信息。所以啊，有些東西得實踐才行，不能只看不敲。這里我定義一個局部 data 屬性，并將 prop 的初始值作為局部數(shù)據(jù)的初始值。知識點：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ù)就要自動添加0，實現(xiàn)很簡單的。剛開始直接判斷是否小于10就添加。但是，“08”是小于10的，所以又自動添加0了。但是我覺得這里寫得不好，還有改進(jìn)的空間的。

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

再說說template里面的事吧。點擊timepicker里面的時分改變組件的的current屬性和透明度。這里顯示數(shù)據(jù)就需要用到fixHour和fixMinutes了。


 {{fixHour(hour)}}
 :
 {{fixMinutes(minutes)}}

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



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

以上是“如何基于Vue實現(xiàn)timepicker”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站www.cdcxhl.com，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

本文題目：如何基于Vue實現(xiàn)timepicker-創(chuàng)新互聯(lián)
文章地址：http://fisionsoft.com.cn/article/dicjpd.html

新聞中心

vue是什么

其他資訊