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

問題

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

原因

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

解決

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

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

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

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

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

使用方法：

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

常見配置項：

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

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

3.dateFormat：日期格式
值：字符串
默認(rèn)：“mm/dd/yy”
4.monthNames：月份名稱
值：包含12個月份的數(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實例并返回選項對象以更新datepicker的函數(shù)。它在顯示datepicker之前調(diào)用。
8.beforeShowDay：面板顯示之前可以為每個日期做處理的函數(shù)（處理業(yè)務(wù)中對日期的相關(guān)處理邏輯）
值：一個以日期作為參數(shù)的函數(shù)，必須返回一個數(shù)組：
[0]：true/ false表示此日期是否可選
[1]：要添加到日期單元格的CSS類名稱
[2]：此日期的可選彈出工具提示語
默認(rèn)： null
*在顯示日期選擇器之前，每個日期都會調(diào)用該函數(shù)。（相當(dāng)于對每個日期遍歷，此函數(shù)會被調(diào)用多次）

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

項目中的遇到的問題，及解決辦法：

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

改造前代碼：

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

因為此插件的樣式要在點(diǎn)擊后插件彈出來之前觸發(fā)，此插件已經(jīng)給這個輸入框綁定上了focus事件，再綁定個click事件，在此事件內(nèi)做樣式修改不就可以了！
經(jīng)實驗，可用。

改造后代碼：

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

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

到此這篇關(guān)于elementplus 中 DatePicker 日期選擇器樣式修改無效的問題及解決方案的文章就介紹到這了,更多相關(guān)DatePicker 日期選擇器樣式修改無效內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論