vue中element-ui元件預設css樣式修改的四種方式
目錄
- 前言
- 1.使用全域性統一覆蓋
- 2.在.檔案中修改
- 3.修改元件的style樣式
- 4. 參考element-ui官方文件的api
- 疑問
- 總結
前言
修改element-ui元件的預設樣式一直是一個老生長談的話題，在做完公司的一整個專案後，我總結了以下4種修改element-ui預設樣式的方法。
1.使用全域性統一覆蓋
針對一些通用的、樣式固定的元件，可以全域性處理，其方法是新建一個或者scss檔案，覆蓋element原有的class
你可以在src/styles目錄下新建一個element-ui-reset.scss，根據UI的需要，修改原有的class名稱
使用scss的好處是可以使用變數，來應對UI的不同變化
比如我們常用的按鈕、分頁、複選框等元件，在UI中基本都是同樣的設計，那麼我就就可以統一修改這些樣式
element-ui-reset.scss
$danger-btn-color: #F25454;
$primary-btn-color:#3d66e4;
$success-btn-color:#12A763;
//修改預設按鈕顏色
.el-button--primary{
background-color: $primary-btn-color;
border-radius: 4px;
//border: 1px solid $primary-btn-color;
font-size: 16px;
border: 0;
}
//修改危險按鈕的顏色
.el-button--danger{
background-color: $danger-btn-color;
border-radius: 4px;
//border: 1px solid $danger-btn-color;
font-size: 16px;
border: 0;
}
//修改成功按鈕的顏色
.el-button--success{
background-color: $success-btn-color;
border-radius: 4px;
//border: 1px solid $success-btn-color;
font-size: 16px;
border: 0;
}
//修改預設按鈕的顏色
.el-button--default{
font-size: 16px;
border-radius: 4px;
}
//修改成功按鈕的顏色
.el-button--wawww.cppcns.com 然後在你的main.中引入
import './src/styles/element-ui-reset.scss'
這樣
優點
- 全域性覆蓋，省事
- 使用scss更加靈活
- 可以隨時刪除樣式的覆蓋
缺點
- 區域性修改時需要重新覆蓋
- 所有被修改的元件樣式都是一樣的
2.在.vue檔案中修改
這種方法是在vue檔案中新加一個style標籤
用於修改一些特定的元件樣式，但不會全域性應用
比如，某個.vue檔案中需要一個特別定製的table元件，而其它檔案則需要用原來的樣式
這樣，我們最好的處理方式就是在.vue檔案中新加一個style標籤
在這裡修改table的預設樣式
<template>
<div class="my-class">
<el-table>
</el-table>
</div>
</template>
<script>
</script>
<style scoped="scoped" lang="scss">
</style>
<style>
/* 修改element-ui中table元件的樣式 */
.my-class__expand-column .cell {
display: none;
}
.my-class .el-table tbody tr:hover>td {
cursor: pointer;
}
.my-class .el-form .el-form-item .el-input__inner:focus{
border: 1px solid #3D66E4;
}
</style>
但請注意，一定要加上唯一的作用域 即最外層的class名，比如我上面的my-class 。 它限定了當前table的修改樣式只能在該class以及其子元素中生效
否則，table的樣式仍會全域性覆蓋
當然，如果你願意，可以將class換成id，這樣保證了class名不會衝突
<template>
<div id="my-class">
<el-table>
</el-table>
</div>
</template>
<style>
/* 修改element-ui中table元件的樣式 */
#my-class__expand-column .cell {
display: none;
}
#my-class .el-table tbody tr:hover>td {
cursor: pointer;
}
#my-class .el-form .el-form-item .el-input__inner:focus{
border: 1px solid #3D66E4;
}
</style>
這種方式的好處在於你可以動態的繫結某些class
<template>
<div id="my-class">
<el-table :class="my-table">
</el-table>
</div>
</template>
<style>
/* 修改element-ui中table元件的樣式 */
#my-class__expand-column .cell {
display: none;
}
#my-class .el-table tbody tr:hover>td {
cursor: pointer;
}
#my-class .el-form .el-form-item .el-input__inner:focus{
border: 1px solid #3D66E4;
}
#my-class .my-table {
}
</style>
優點
- 靈活自定義,可以動態繫結
- 不會全域性修改
缺點
- 需要指定唯一的class作用域
3.修改元件的style樣式
這種方法我不是很推薦，拋開冗餘不說，其實不敢保證其生效(依賴element-ui原始碼的支援程度)。
但是，對於某些使用頻率很低但需要動態繫結屬性的元件，你可以使用它
比如這個<el-backtop>元件，我可能需要給它繫結一些動態的樣式屬性
這樣你就可給它繫結style
<el-backtop target="" :bottom="100" >
<div :style="{
height: 100%;
width: _width;
background-color: #f2f5f6;
box-shadow: 0 0 6px rgba(0,.12);
text-align: center;
line-height: 40px;
color: #1989fa;
border-radius: 50%;
}">
<i class="el-icon-caret-top"></i>
</div>
</el-backtop>
data() {
return{
_width: 50%
}
}
優點
- 靈活方便
- 動態繫結
缺點
- 冗餘
- 耦合性高
4. 參考element-ui官方文件的api
有些元件官網給了修改樣式的api
你可以按照api來指定元件的樣式
優點
- 官方
缺點
- 支援元件較少
疑問
為何要新加一個style標籤 ?
因為在實際使用過程中，我發現寫在帶有scoped屬性的某些class並不對element-ui的元件生效
這造成有的修改樣式可以用，有的不可以，所有就索性重新寫了了style標籤
為何不用!important屬性
這傢伙太霸道了，比全域性修改還要強制。況且寫起來很麻煩
為何不用::v-deep穿透
首先，拋開寫法噁心來說，其耦合性太高
假如在你不需要樣式覆蓋的時候客棧，你只需要刪除新的style標籤
而用::v-deep 的話，逐行去改誰受得了
總結
上面的方法並不是很官方的做法，而是我日常開發中踩坑後，總結出來的方法
雖說不太完美，但很大程度上解決我的問題
到此這篇關於vue中element-ui元件預設css樣式修改的文章就介紹到這了,更多相關vue element-ui元件預設css樣式修改內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！