elementplus 中 DatePicker 日期選擇器樣式修改無效

問題

遇到一個(gè)需求需要修改 DatePicker 日期選擇器的樣式，在添加了 scoped 屬性的 style 標(biāo)簽，并且使用了 deep 樣式穿透的情況下并不能修改其樣式。

原因

DatePicker 日期選擇器彈出面板默認(rèn)掛載在 body 上，所以在組件中添加了 scoped 屬性的 style 標(biāo)簽下是修改不到其樣式的。

解決

官網(wǎng)中提供了一個(gè)給彈出面板設(shè)置 class 類名的屬性——popper-class，通過該屬性添加類名后選擇該類名來修改樣式即可。

需要注意的是，雖然官網(wǎng)提供了該屬性，但是我們通過屬性來修改樣式的時(shí)候也并不能改變彈出面板是掛載在 body 的事實(shí)，所以我們要修改其樣式的話需要把 scoped 屬性去掉才行，我們可以添加一個(gè)新的不帶 scoped 屬性的 style 標(biāo)簽來對(duì)其樣式進(jìn)行修改。代碼如下：

<template>
  <el-date-picker
     v-model="time"  
     type="datetime"
     placeholder="請(qǐng)選擇時(shí)間"
     popper-class="date-cell">
  </el-date-picker>
</template>
<style scoped lang="scss">
	...//組件內(nèi)部樣式
</style>
<style lang="scss"> //去掉 scoped 屬性
	...//時(shí)間選擇器樣式
</style>

補(bǔ)充介紹datepicker的使用方法

===導(dǎo)語：前一章已經(jīng)實(shí)現(xiàn)了點(diǎn)擊輸入框彈出datepicker日期插件，但業(yè)務(wù)的處理邏輯放在哪里還未解決。此章主要介紹datepicker的使用方法，以及常見的配置項(xiàng)和對(duì)應(yīng)的值。

使用方法：

方法很簡(jiǎn)單$(‘selector’).datepicker({});此方法內(nèi)包含著配置參數(shù)的對(duì)象，根據(jù)需要按需配置即可。
*需要注意的是：因?yàn)榇瞬寮恼{(diào)用默認(rèn)事件是focus或者是button所以在寫html時(shí)就選擇input或者是button元素。

常見配置項(xiàng)：

1.minDate：最小可選日期*
值：日期或數(shù)字或字符串
==日期：包含最小日期的日期對(duì)象。
== 數(shù)字：從今天開始的幾天。例，2代表從今天開始的兩天，-1代表昨天。
==字符串：由dateFormat選項(xiàng)定義的格式的字符串，或相對(duì)日期。
相對(duì)日期 必 須包含值和期間對(duì); 有效期為數(shù)"y"年，
"m"數(shù) 月，“w"數(shù)周和數(shù)"d"天。例如，”+1m +7d"代表
從今天起一個(gè)月零七天。

2.maxDate：最大可選日期
值：日期或數(shù)字或字符串（同上）
默認(rèn)為null，沒有最大值。

3.dateFormat：日期格式
值：字符串
默認(rèn)：“mm/dd/yy”
4.monthNames：月份名稱
值：包含12個(gè)月份的數(shù)組（主要用于本土化）
默認(rèn)： [ “January”, “February”, “March”, “April”, “May”, “June”, “July”, “August”, “September”, “October”, “November”, “December” ]
5.dayNamesMin：列標(biāo)題
值：包含周日到周六的數(shù)組（主要用于本土化）
默認(rèn)：[ “Su”, “Mo”, “Tu”, “We”, “Th”, “Fr”, “Sa” ]
6.showMonthAfterYear：年月顯示順序
值：布爾值
默認(rèn)：false
7.beforeShow:日期面板顯示之前的處理函數(shù)（處理業(yè)務(wù)中面板顯示與否相關(guān)的邏輯）
默認(rèn)：null
功能：獲取輸入字段和當(dāng)前datepicker實(shí)例并返回選項(xiàng)對(duì)象以更新datepicker的函數(shù)。它在顯示datepicker之前調(diào)用。
8.beforeShowDay：面板顯示之前可以為每個(gè)日期做處理的函數(shù)（處理業(yè)務(wù)中對(duì)日期的相關(guān)處理邏輯）
值：一個(gè)以日期作為參數(shù)的函數(shù)，必須返回一個(gè)數(shù)組：
[0]：true/ false表示此日期是否可選
[1]：要添加到日期單元格的CSS類名稱
[2]：此日期的可選彈出工具提示語
默認(rèn)： null
*在顯示日期選擇器之前，每個(gè)日期都會(huì)調(diào)用該函數(shù)。（相當(dāng)于對(duì)每個(gè)日期遍歷，此函數(shù)會(huì)被調(diào)用多次）

以上只是在此項(xiàng)目中用到的一些方法，具體其他的參數(shù)，值，以及函數(shù)的使用方法請(qǐng)參考datepicker官網(wǎng)

項(xiàng)目中的遇到的問題，及解決辦法：

項(xiàng)目需求：
只有后臺(tái)返回的日期時(shí)間可以選擇，之外的日期都不可點(diǎn)。
已取得：
由以上的文檔，可以得知處理業(yè)務(wù)中面板顯示與否相關(guān)的邏輯應(yīng)該放在beforeShow對(duì)應(yīng)的處理函數(shù)中。
處理業(yè)務(wù)中對(duì)日期的相關(guān)處理邏輯應(yīng)該放在beforeShowDay對(duì)應(yīng)的處理函數(shù)中。
存在問題：
處理完畢后插件的整體處理邏輯沒有問題了，但是重新寫的樣式無法覆蓋原來的樣式代碼。

改造前代碼：

日期插件內(nèi)部樣式改動(dòng)找到對(duì)應(yīng)的樣式類名重新定義就可以，此處不在貼代碼。但是點(diǎn)擊輸入框彈出插件時(shí)樣式未被覆蓋上。

因?yàn)榇瞬寮臉邮揭邳c(diǎn)擊后插件彈出來之前觸發(fā)，此插件已經(jīng)給這個(gè)輸入框綁定上了focus事件，再綁定個(gè)click事件，在此事件內(nèi)做樣式修改不就可以了！
經(jīng)實(shí)驗(yàn)，可用。

改造后代碼：

總結(jié)：
1.$(‘selector’).datepicker({})默認(rèn)已經(jīng)綁定focus或者button事件觸發(fā)，無需再次綁定對(duì)應(yīng)事件。
2.處理業(yè)務(wù)中面板顯示與否相關(guān)的邏輯應(yīng)該放在beforeShow對(duì)應(yīng)的處理函數(shù)中。
3.對(duì)日期的相關(guān)處理邏輯應(yīng)該放在beforeShowDay對(duì)應(yīng)的處理函數(shù)中。
4.再綁定個(gè)click事件，在此事件內(nèi)做樣式修改。

**最重要的還是先看官網(wǎng)文檔，避免做很多無用功?。。。。?/strong>