快捷導(dǎo)航

elementUI樣式修改未生效問(wèn)題詳解(掛載到了body標(biāo)簽上)

更新時(shí)間：2023年04月06日 08:58:46 作者：superManee

vue+elementUI項(xiàng)目開(kāi)發(fā)中,經(jīng)常遇到修改elementUI組件樣式無(wú)效的問(wèn)題,這篇文章主要給大家介紹了關(guān)于elementUI樣式修改未生效問(wèn)題的相關(guān)資料,掛載到了body標(biāo)簽上,需要的朋友可以參考下

前言

在使用element-ui庫(kù)的時(shí)候，有時(shí)會(huì)需要修改它自帶的css樣式，組件模塊化化編程時(shí)一般會(huì)用到/deep/方法進(jìn)行樣式穿透修改，但有些情況/deep/方法也會(huì)失效，針對(duì)這些情況，下面就以修改elementUi中的DateTimePicker時(shí)間選擇器組件樣式來(lái)講一下自己的心得。

一、適用范圍

1、修改elementUI自帶樣式

2、/deep/深穿透樣式修改方法失效

3、不污染全局樣式

二、示例

1.目標(biāo)

假設(shè)業(yè)務(wù)需要一個(gè)只帶年、月、日、時(shí)的時(shí)間選擇器（如下圖）

2.實(shí)現(xiàn)思路

首先在element-ui庫(kù)中進(jìn)行匹配尋找，發(fā)現(xiàn)沒(méi)有與之完全一致的模型，為了省時(shí)，可以選擇一個(gè)比較接近的模型進(jìn)行ui改造，這里我選擇的是 el-date-picker時(shí)間選擇器

首先看下它本身的樣式：

代碼如下：

  <div>
    <el-date-picker
      v-model="value1"
      type="datetime"
      placeholder="選擇日期時(shí)間">
    </el-date-picker>
  </div>

修改自帶樣式方法

找到編譯后element-ui給本時(shí)間選擇器定義的div盒子類(lèi)名（見(jiàn)下圖）

因?yàn)椴恍枰獔D中分和秒這兩列，所以我們可以在本組件的單獨(dú)的樣式文件中標(biāo)簽中修改為自己需要的樣式

先來(lái)個(gè)錯(cuò)誤示范

利用 /deep/ 方法進(jìn)行樣式穿透修改本時(shí)間選擇器樣式

代碼如下（示例）：

<style scoped lang="less">
/deep/.el-picker-panel {
  .el-time-spinner{
    .el-time-spinner__wrapper {
      width: 100% !important;
    }
  }
}
</style>

這樣做后發(fā)現(xiàn)我們所修改的樣式并未生效，原因是因?yàn)镈ateTimePicker 下拉框最終是直接掛載到body標(biāo)簽上，也就是說(shuō)它與我們的子組件都是并列關(guān)系，所以我們?cè)诙x它的子組件中修改它的樣式會(huì)失敗。

接下來(lái)展示正確做法

可以在element-ui 中看到DateTimePicker的Attributes中存在一個(gè)popper-class屬性，官方介紹中可以利用它可以給DateTimePicker 下拉框的設(shè)置類(lèi)名

<template>
  <div class="home">
    <el-date-picker
      v-model="value1"
      format="yyyy-MM-dd H"
      value-format="yyyy-MM-dd H"
      type="datetime"
      placeholder="選擇日期時(shí)間"
      popper-class='myDatePicker'>
    </el-date-picker>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      value1:''
    }
  },
};
</script>

<style scoped lang="less">
// 此處寫(xiě)本組件樣式
</style>

<style lang="less">
/* 注意此處沒(méi)有添加scoped屬性，所以全局生效，但是有類(lèi)名限制，不會(huì)與其他類(lèi)樣式?jīng)_突 */
.myDatePicker {
    .el-time-spinner__wrapper{
      width: 100% !important;
    }
}
</style>

最后看效果