您好,登錄后才能下訂單哦!
1.場景描述
我們公司是做電商的,運(yùn)營的工作指標(biāo)都是按周來定的,所以他們對周特別敏感,希望我們能在日期選擇器上顯示周數(shù)。剛接到這個(gè)需求時(shí),心中很不樂意,因?yàn)镋lement-ui的日期選擇器根本不支持顯示周數(shù)。我只能看看源碼來看看能否有解決的辦法
具體代碼大家可以在github中看到https://github.com/ElemeFE/element/pull/16415/commits/2b810cf73d1127645054265469bbb353d036cb21
2.查看源碼
我們很輕松就能找到DatePicker相關(guān)的代碼,在packages > date-picker 整個(gè)目錄都是date-picker的代碼,在date-picker > src > basic > date-table.vue中就是顯示日期的代碼,在這里竟然發(fā)現(xiàn)了一個(gè)屬性showWeekNumber,在date-table.vue的第83行。
showWeekNumber: { type: Boolean, default: false },
為了驗(yàn)證這個(gè)參數(shù)對我們是否有幫助,我們把showWeekNumber默認(rèn)設(shè)置為true試試,然后把第11行的
<th v-if="showWeekNumber">{{ t('el.datepicker.week') }}</th>
改為
<th v-if="showWeekNumber">周數(shù)</th>
設(shè)置用來設(shè)置國際化的,國際化文件中沒有這個(gè)對應(yīng)的翻譯,我們暫時(shí)先這么寫,不然會報(bào)錯(cuò)。當(dāng)我們完成這個(gè)之后神奇的事情發(fā)生了
周數(shù)展示出來了,而且好像展示的事正確的,7.1-7.6就是2019年的第27周。既然能夠展示周數(shù),那么為什么element不開放出來這個(gè)參數(shù)了,是否是有什么問題呢。我們自己來簡單的測試下
3. 發(fā)現(xiàn)并解決問題
問題
(1)切換月時(shí),周數(shù)并不會發(fā)生變化
(2)選中的是29周,輸入框中確展示的是28周
(3)hover選中時(shí),周數(shù)不應(yīng)該展示高亮的樣式
(4)日期區(qū)間選中的樣式也不正確
解決問題
(1)解決周數(shù)不變化的問題,我們找到date-table.vue中第149行到152行
if (this.showWeekNumber) { if (!row[0]) { row[0] = { type: 'week', text: getWeekNumber(nextDate(startDate, i * 7 + 1)) }; } }
當(dāng)showWeekNumber為true時(shí),row[0]就是用來展示周數(shù)的,當(dāng)row[0],存在時(shí),就不在去獲取新的值,顯然不正確,我們把if判斷去掉就行,這樣就會更新周數(shù)
(2)解決選中后周數(shù)展示不正確的問題,我們找到date-table.vue中第14行到18行
<tr class="el-date-table__row" v-for="(row, key) in rows" :class="{ current: isWeekActive(row[1]) }" :key="key">
isWeekActive就是用來獲得當(dāng)前展示的周數(shù)的,當(dāng)展示周數(shù)之后我們要做適當(dāng)?shù)男薷?/p>
<tr class="el-date-table__row" v-for="(row, key) in rows" :class="{ current: isWeekActive(row[showWeekNumber ? 2 : 1]) }" :key="key">
至于第三個(gè)問題和第三個(gè)問題都是樣式的問題,我們修改下date-table對應(yīng)的樣式即可
最后看下展示效果
4. 最后
我已經(jīng)向element-ui提了pr,但是還沒有merge,具體的代碼大家可以在github中看到https://github.com/ElemeFE/element/pull/16415/commits/2b810cf73d1127645054265469bbb353d036cb21,解決了國際化的問題和增加了參數(shù)展示周數(shù)
5. 問題
代碼是已經(jīng)改好了,但是我們引入餓了么的代碼是直接通過npm下載的,線上環(huán)境也是npm下載的,我們是無法來更改npm的代碼的。那么我們怎么來解決這個(gè)問題呢,請看我的下一篇文章,我最近會更新。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。