資訊專欄INFORMATION COLUMN
摘要：背景前一陣，應(yīng)公司的需求，需要一個(gè)在移動(dòng)端運(yùn)行的組件選擇日期。思考過后變決定自己寫一套移動(dòng)端日期選擇器組件。而應(yīng)該從用戶的角度出發(fā)，提高組件的易用性與靈活性。
背景
前一陣，應(yīng)公司的需求，需要一個(gè)在移動(dòng)端運(yùn)行的react組件datepicker(選擇日期)。
搜索查找過后，我并沒有找到一個(gè)既輕量級(jí)簡潔又滿足需求的組件。大部分現(xiàn)成的日期選擇器都是相對(duì)于pc端開發(fā)的。
思考過后變決定自己寫一套移動(dòng)端react日期選擇器組件react-mobile-datepicker。
Github
Demo
過程開發(fā)過程中并沒有什么阻礙，功能完成后，經(jīng)過了一系列單元測試，便發(fā)布出去了，舊版如圖：
允許用戶修改背景，字體，按鈕顏色。
允許用戶上下滑動(dòng)日期（但每日滑動(dòng)僅限修改一個(gè)日期）
這個(gè)2.xx版本的日期選擇器，簡單粗暴，一經(jīng)發(fā)布就得到了廣泛的吐槽。
吐槽的內(nèi)容有：
樣式丑陋
配置選項(xiàng)太少，無論怎么調(diào)顏色都很丑
修改的日期不方便
教訓(xùn)經(jīng)過大量參考其他日期選擇器的樣式以及配置選項(xiàng)后，我發(fā)現(xiàn)用戶想要的并不是自己控制組件的背景，文字顏色，而是需要一個(gè)已經(jīng)配置好并符合常規(guī)，優(yōu)雅的日期選擇器。用戶希望有現(xiàn)成的好看并且主流的樣式，而不是自己編寫樣式。
于是乎，在3.xx的版本中，預(yù)定義了5個(gè)主題供用戶來選擇，如圖：
為了滿足更多的需求，優(yōu)化后的組件添加了其他的一些配置項(xiàng)，如讓用戶自定義顯示的日期格式，如圖:
之前上下滑動(dòng)組件只能一個(gè)一個(gè)修改日期，優(yōu)化后滑動(dòng)日期的范圍更加廣泛。
2.xx版本：
新版本：
經(jīng)過這次開發(fā)的教訓(xùn)，我明白了開發(fā)一個(gè)好的組件，并不應(yīng)該急于求成求，想當(dāng)然的只完成單一情況的需求。
而應(yīng)該從用戶的角度出發(fā)，提高組件的易用性與靈活性。同時(shí)感謝吐槽與批評(píng)我的開發(fā)者，正因?yàn)橛羞@些人的融入，才能讓每一個(gè)前端組件不斷的完善，為我們所用。最后，誠摯邀請(qǐng)大家pull requests代碼。不斷完善國內(nèi)的前端大業(yè)。
Github地址：https://github.com/lanjingling0510/react-mobile-datepicker
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/80392.html
摘要：一個(gè)輕量級(jí)的移動(dòng)端日期選擇器，不依賴于只有不到大小?？梢酝ㄟ^上下滑動(dòng)來設(shè)置年月日。在模擬的移動(dòng)端可上下滑動(dòng)觸發(fā)事件。使用例子組件屬性名稱類型默認(rèn)描述是否彈出日期選擇框的主題包括根據(jù)指定的年，月，日格式顯示日期。 react-mobile-datepicker 一個(gè)輕量級(jí)的react移動(dòng)端日期選擇器，不依賴于moment.js, 只有不到4k大小。 react-mobile-datepi...
摘要：調(diào)用通過注冊(cè)表調(diào)用到實(shí)例，透過的，調(diào)用到中的，最后通過，調(diào)用，根據(jù)參數(shù)相應(yīng)模塊執(zhí)行。京東的，多端解決方案是一套遵循語法規(guī)范的多端開發(fā)解決方案。 showImg(https://segmentfault.com/img/bVbuMkw?w=1304&h=808); 對(duì)于一項(xiàng)技術(shù)，我們不能停留在五分鐘狀態(tài)，特別喜歡一句話，用什么方式繪制UI界面一點(diǎn)不重要，重要的是底層的思維，解決問題和優(yōu)化...
摘要：調(diào)用通過注冊(cè)表調(diào)用到實(shí)例，透過的，調(diào)用到中的，最后通過，調(diào)用，根據(jù)參數(shù)相應(yīng)模塊執(zhí)行。京東的，多端解決方案是一套遵循語法規(guī)范的多端開發(fā)解決方案。 showImg(https://segmentfault.com/img/bVbuMkw?w=1304&h=808); 對(duì)于一項(xiàng)技術(shù)，我們不能停留在五分鐘狀態(tài)，特別喜歡一句話，用什么方式繪制UI界面一點(diǎn)不重要，重要的是底層的思維，解決問題和優(yōu)化...
摘要：調(diào)用通過注冊(cè)表調(diào)用到實(shí)例，透過的，調(diào)用到中的，最后通過，調(diào)用，根據(jù)參數(shù)相應(yīng)模塊執(zhí)行。京東的，多端解決方案是一套遵循語法規(guī)范的多端開發(fā)解決方案。 showImg(https://segmentfault.com/img/bVbuMkw?w=1304&h=808); 對(duì)于一項(xiàng)技術(shù)，我們不能停留在五分鐘狀態(tài)，特別喜歡一句話，用什么方式繪制UI界面一點(diǎn)不重要，重要的是底層的思維，解決問題和優(yōu)化...
閱讀 531·2021-09-03 00:22
閱讀 1403·2021-08-03 14:03
閱讀 2123·2021-07-25 21:37
閱讀 678·2019-08-30 13:18
閱讀 1905·2019-08-29 16:19
閱讀 2712·2019-08-29 13:22
閱讀 1342·2019-08-29 12:16
閱讀 2611·2019-08-26 12:16
