基于Vue實(shí)現(xiàn)timepicker
在github上看到的練習(xí),看了遍代碼后,按自己的思路再修改了一下。
先放原址:https://github.com/graysheeep/vue-material-timepicker。
自己做的在線demo:http://jsbin.com/dumace/2/edit?html,js,output
主要用到的還是Vue的基本知識(shí)而已,不過要想到的細(xì)節(jié)很多。
先放效果,點(diǎn)擊上框,顯示timepicker。而且可以根據(jù)點(diǎn)擊的是時(shí)還是分來改變圓盤的數(shù)字。
這里我用了兩個(gè)組件,<time-box>和<time-picker>,這里的時(shí)和分的數(shù)值我掛在了根實(shí)例中,因?yàn)閮蓚€(gè)組件都需要這兩個(gè)值,所以想了想我決定還是掛在根實(shí)例,通過動(dòng)態(tài)綁定到組件中。HTML見在線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)聽關(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ù)字。改變父組件的屬性,有兩種辦法,一是直接修改父組件屬性;二是通過自定義事件。
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í)分是通過props傳進(jìn)來的,剛開始我直接操作this.hour,然后控制臺(tái)警告??吹骄娌畔肫鹂催^的知識(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)很簡單的。剛開始直接判斷是否小于10就添加。但是,“08”是小于10的,所以又自動(dòng)添加0了。但是我覺得這里寫得不好,還有改進(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 },
再說說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è)位置。里面的針就通過CSS3的旋轉(zhuǎn)啦。一共360度,12個(gè)格,一小時(shí)60分鐘,這么簡單的數(shù)字知識(shí)就不繼續(xù)說下去了,下面的乘法我相信各位是看得懂的。這里注意的是60,我們鐘表沒有60只有0啊,所以 ((5 * i) % 60 || “00”)。這里寫得很有技巧。60%60是0。然后是||和&&的問題了(推薦兩本書《你不知道的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才渲染到頁面,所以每次隱藏顯示都重新渲染一遍。我覺得。。。如果實(shí)際中,經(jīng)常要開開關(guān)關(guān)的就用v-show就好了,但是用來v-show我發(fā)現(xiàn)不能根據(jù)選中的是時(shí)還是分來展現(xiàn)數(shù)值,很奇怪,v-if就可以。剛開始覺得是初始化問題,但是,既然hour和minute能根據(jù)props傳下來再data轉(zhuǎn)化,為啥mode就不行呢?沒想明白。
在線demo:http://jsbin.com/dumace/2/edit?html,js,output
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Bootstrap時(shí)間選擇器datetimepicker和daterangepicker使用實(shí)例解析
- angularjs封裝bootstrap時(shí)間插件datetimepicker
- bootstrap datetimepicker日期插件使用方法
- bootstrap-datetimepicker實(shí)現(xiàn)只顯示到日期的方法
- 仿Angular Bootstrap TimePicker創(chuàng)建分鐘數(shù)-秒數(shù)的輸入控件
- Bootstrap3 datetimepicker控件使用實(shí)例
- 基于bootstrap-datetimepicker.js不支持IE8的快速解決方法
- bootstrap datetimepicker日期插件超詳細(xì)使用方法介紹
- AngularJs中Bootstrap3 datetimepicker使用實(shí)例
相關(guān)文章
element-ui table組件如何使用render屬性的實(shí)現(xiàn)
這篇文章主要介紹了element-ui table組件如何使用render屬性的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11詳解vue中v-for和v-if一起使用的替代方法template
這篇文章主要介紹了vue中v-for和v-if一起使用的替代方法template,使用的版本是vue?2.9.6和element-ui:?2.15.6,通過實(shí)例代碼給大家講解的非常詳細(xì),需要的朋友可以參考下2022-05-05vue3+element-plus?Dialog對(duì)話框的使用與setup?寫法的用法
這篇文章主要介紹了vue3+element-plus?Dialog對(duì)話框的使用?與?setup?寫法的使用,本文通過兩種方式結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-04-04vue elementUI實(shí)現(xiàn)自定義正則規(guī)則驗(yàn)證
本文主要介紹了vue elementUI實(shí)現(xiàn)自定義正則規(guī)則驗(yàn)證,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03vue實(shí)現(xiàn)節(jié)點(diǎn)增刪改功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)節(jié)點(diǎn)增刪改功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-09-09利用Vite2和Vue3實(shí)現(xiàn)網(wǎng)站國際化的全過程
vite2已經(jīng)出來一段時(shí)間了,最近沒忍住嘗試了一下,這篇文章主要給大家介紹了關(guān)于利用Vite2和Vue3實(shí)現(xiàn)網(wǎng)站國際化的相關(guān)資料,需要的朋友可以參考下2021-08-08