徒手擼UI之TimePicker

Codeing_ls 發布于2019-08-22 15:41 / 1429人閱讀

摘要：是一個組件庫目前擁有的組件語法編寫，無依賴原生模塊化，以上支持，請開啟靜態服務器預覽效果，靜態服務器傳送門采用變量配置樣式辛苦造輪子，歡迎來倉庫四月份找工作，求內推，坐標深圳寫在前面去年年底項目中嘗試著寫過一個分頁的組件，然后就有了寫的想法

QingUI是一個UI組件庫

目前擁有的組件：DatePicker, TimePicker, Paginator, Tree, Cascader, Checkbox, Radio, Switch, InputNumber, Input

ES6語法編寫，無依賴

原生模塊化，Chrome63以上支持，請開啟靜態服務器預覽效果，靜態服務器傳送門

采用CSS變量配置樣式

辛苦造輪子，歡迎來github倉庫star：https://github.com/veedrin/qing

四月份找工作，求內推，坐標深圳

寫在前面

去年年底項目中嘗試著寫過一個分頁的Angular組件，然后就有了寫QingUI的想法

過程還是非常有意思的

接下來我會用幾篇文章分別介紹每個組件的大概思路，請大家耐心等待

這一篇介紹TimePicker日期選擇器

最重要的，求star，求fork，求內推

QingUI

少廢話，先上圖

當前時間

介紹DatePicker的文章寫的時候已經凌晨了，畢竟那天commit了50多次，所以有點草率，這回我盡量寫的清楚一點

初始加載TimePicker的時候肯定顯示當前的時間，所以我們首先要獲取當前的時間

當前時間好說，只是ES6提供了解構賦值正好可以在這里派上用場

直接返回一個數組，需要的時候一次性賦值就好了

如果不需要這么多，沒問題，ES6不僅可以批發，還可以零售，貼不貼心！

為什么秒不直接賦值呢？因為我覺得很少有場景我們需要精確到秒，還不如初始直接給個0，省的別人點一下，他要精確到秒是他的事

constructor() {
    [this.H, this.M, ] = this.nowTime();
    this.S = 0;
}

nowTime() {
    const date = new Date();
    return [date.getHours(), date.getMinutes(), date.getSeconds()];
}

當用戶選擇的時候，選中的就會高亮，之前的高亮會取消

我們可以粗暴一點，每次點擊都運行一個for循環，找到高亮，取消高亮，場子清完以后再將當前選中的高亮

不過這樣性能肯定是不好的

如果我把選中的時間緩存起來

每次點擊的時候我還記得上次高亮的在哪，直接處理它就好了，少了一個for循環是不是好多了

不過要注意，每次點擊都要把新值緩存，它就是個跟屁蟲，可不能掉隊

constructor() {
    [this.oldH, this.oldM, this.oldS] = [this.H, this.M, this.S];
}

切換

時鐘、分鐘、秒鐘，總共有三個面板，所以我設置三個按鈕，時間格動態渲染

假如用戶點擊時鐘按鈕，他要怎么辨別剛才點的是哪個按鈕呢？

下意識的，我們會想到，當前活躍的，我們就給它置灰，以來作區分，二來省的用戶無聊老在一個地方點來點去造成重復渲染

我以前也有過一點經驗，就是button的disabled屬性并不是通過true和false來控制的

真正控制它是否置灰的，是有沒有這個屬性

我覺得這個設計...

所以我們寫一個控制置灰的函數，同樣，oldDisabled是用來緩存的

ableAndDisableEvent(ableNode) {
    if (this.oldDisabled) {
        this.oldDisabled.removeAttribute("disabled");
    }
    ableNode.setAttribute("disabled", "");
    this.oldDisabled = ableNode;
}

有時候我們有這樣的需求，雖然點擊事件是響應用戶操作的，但偶爾我們自己也希望觸發一下事件

用戶可以觸發點擊事件，那么程序可以嗎？

其實是可以的，.click()，就這么簡單

說實話這個我也是第一次見，可能是我比較孤陋寡聞吧...

this.oldDisabled.click();

轉數字

當我們點擊時，獲取到的innerHTML實際上是一個字符串

我希望在入口把關，保證this.H; this.M; this.S;都是數字類型

于是我們就要把字符串類型的數字轉成真數字，這倒不難

我曾經測過幾種字符串類型的數字轉成真數字的方法，當然，我說的是正整數

parseInt()

parseFlout()

Number()

Math.floor()

num - 0

性能肯定是num - 0最好，但是這樣并不是特別正規

除此之外，性能最好的是parseInt()，parseFlout()要考慮小數位，Number()估計是內部的類型轉換比較復雜

除了語義化并不是特別好之外，我平常都喜歡用parseInt()

但這不是重點

重點是ES6在Number下面也掛載了該方法，window.parseInt()和Number.parseInt()都是可以的，為什么這樣做呢？

因為JS的全局對象window實在是太復雜了，它不僅是全局對象，還是窗口對象，連所有的全局變量都掛在它下面

所以W3C希望改變這個現狀，盡量減少甚至取消window下面的屬性

這也是為什么在ES6模塊內，指向全局的this等于undefined

所以，如果兼容性允許的話，盡量用Number.parseInt()代替window.parseInt()，為美妙的JS盡一份力

離Everything Based On JavaScript就不遠了吧

格式化

比較正規的時間表盤都會顯示兩位數，比如3點20分，會寫成03: 20

所以我們也需要一個兩位數的格式化函數

為什么需要String(num).length === 1這個判斷條件？

因為有時傳進來的參數已經格式化過了，而它實際上又小于10，所以需要過濾掉它們

twoDigitsFormat(num) {
    if (String(num).length === 1 && num < 10) {
        num = `0${num}`;
    }
    return num;
}

然后我再用一個漏斗函數把變化收集起來，統一更新

timeChangeEvent(hour, minute, second) {
    hour ? this.H = hour : "";
    minute ? this.M = minute : "";
    second ? this.S = second : "";
    this.$view.innerHTML = this.timeFormat(this.H, this.M, this.S);
}

至于顯示成最終的時間格式，我們有它

timeFormat(hour = 0, minute = 0, second = 0) {
    hour = this.twoDigitsFormat(hour);
    minute = this.twoDigitsFormat(minute);
    second = this.twoDigitsFormat(second);
    return `${hour} : ${minute} : ${second}`;
}

寫在后面

首先，這個時間選擇器確實不好看，我將來可能會重構

然后，時間選擇器也確實比較簡單，比日期選擇器代碼少多了

不過還是可以自己嘗試著自己寫一個，一切都在細節里

下一篇文章介紹Paginator，敬請期待

最后，求star，求fork，求內推

QingUI

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/93667.html

徒手擼UI之DatePicker

摘要：是一個組件庫目前擁有的組件語法編寫，無依賴原生模塊化，以上支持，請開啟靜態服務器預覽效果，靜態服務器傳送門采用變量配置樣式辛苦造輪子，歡迎來倉庫四月份找工作，求內推，坐標深圳寫在前面去年年底項目中嘗試著寫過一個分頁的組件，然后就有了寫的想法 QingUI是一個UI組件庫目前擁有的組件：DatePicker, TimePicker, Paginator, Tree, Cascader, ...

zilu 2019-08-22 15:39 評論0 收藏0
徒手擼UI之Paginator

摘要：是一個組件庫目前擁有的組件語法編寫，無依賴原生模塊化，以上支持，請開啟靜態服務器預覽效果，靜態服務器傳送門采用變量配置樣式辛苦造輪子，歡迎來倉庫四月份找工作，求內推，坐標深圳寫在前面去年年底項目中嘗試著寫過一個分頁的組件，然后就有了寫的想法 QingUI是一個UI組件庫目前擁有的組件：DatePicker, TimePicker, Paginator, Tree, Cascader, ...

liuhh 2019-08-22 15:43 評論0 收藏0
徒手擼UI之Cascader

摘要：但是如果一剎那我不想選江疏影了，我想選張雨綺因為胸大，首先我要從霍思燕換到高圓圓，然后轉到張雨綺，選中展示出來，這時候就要先刪除霍思燕，然后把高圓圓和張雨綺進來。 QingUI是一個UI組件庫目前擁有的組件：DatePicker, TimePicker, Paginator, Tree, Cascader, Checkbox, Radio, Switch, InputNumber, I...

junnplus 2019-08-22 17:35 評論0 收藏0
徒手擼UI之Tree

摘要：是一個組件庫目前擁有的組件語法編寫，無依賴原生模塊化，以上支持，請開啟靜態服務器預覽效果，靜態服務器傳送門采用變量配置樣式辛苦造輪子，歡迎來倉庫四月份找工作，求內推，坐標深圳寫在前面去年年底項目中嘗試著寫過一個分頁的組件，然后就有了寫的想法 QingUI是一個UI組件庫目前擁有的組件：DatePicker, TimePicker, Paginator, Tree, Cascader, ...

2i18ns 2019-08-22 15:46 評論0 收藏0
一言不合造輪子--擼一個ReactTimePicker

摘要：時間選擇的表盤其實有兩個，一個是小時的選擇，另一個則是分鐘的選擇。也就是說，第一步選擇小時，第二部選擇分鐘它是一個小時制的時間選擇器。而則用于處理拖拽事件，標記著當前是否處于被拖拽狀態。本文的源碼全部位于github項目倉庫react-times，如果有差異請以github為準。最終線上DEMO可見react-times github page 文章記錄了一次創建獨立React組件...

lifesimple 2019-08-22 10:38 評論0 收藏0