vue中element-ui組件默認(rèn)css樣式修改的四種方式
前言
修改element-ui組件的默認(rèn)樣式一直是一個老生長談的話題，在做完公司的一整個項目后，我總結(jié)了以下4種修改element-ui默認(rèn)樣式的方法。
1.使用全局統(tǒng)一覆蓋
針對一些通用的、樣式固定的組件，可以全局處理，其方法是新建一個css或者scss文件，覆蓋element原有的class
你可以在src/styles目錄下新建一個element-ui-reset.scss，根據(jù)UI的需要，修改原有的class名稱
使用scss的好處是可以使用變量，來應(yīng)對UI的不同變化
比如我們常用的按鈕、分頁、復(fù)選框等組件，在UI中基本都是同樣的設(shè)計，那么我就就可以統(tǒng)一修改這些樣式
element-ui-reset.scss
$danger-btn-color: #F25454;
$primary-btn-color:#3d66e4;
$success-btn-color:#12A763;
//修改默認(rèn)按鈕顏色
.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;
}
//修改默認(rèn)按鈕的顏色
.el-button--default{
font-size: 16px;
border-radius: 4px;
}
//修改成功按鈕的顏色
.el-button--warning{
//background-color: $success-btn-color;
border-radius: 4px;
//border: 1px solid $success-btn-color;
font-size: 16px;
border: 0;
}
//修改分頁顏色
.el-pagination{
position: absolute;
display: inline-block;
margin: 0 auto;
left:50%;
transform: translateX(-50%);
background-color: #fafafa;
border: solid 1px #dfe8eb;
padding: 0 !important;
.el-pager{
margin: 0 !important;
.number{
color: #3d66e4 !important;
border-left: 1px solid #dfe8eb;
border-right: 1px solid #dfe8eb;
background-color: #fafafa !important;
&.active{
color: #fff !important;
//border: 1px solid #3d66e4;
background-color: #3d66e4 !important;
border: 1px solid #3d66e4 !important;
}
}
}
}
.el-pagination.is-background .btn-next, .el-pagination.is-background .btn-prev, .el-pagination.is-background .el-pager li{
margin: 0 !important;
background-color: #fafafa !important;
}
//修改checkbox
.el-checkbox__inner{
border: 1px solid #C0C0C0 ;
width: 16px;
height: 16px;
border-radius: 0;
}
然后在你的main.js中引入
import './src/styles/element-ui-reset.scss'
這樣
優(yōu)點
- 全局覆蓋，省事
- 使用scss更加靈活
- 可以隨時刪除樣式的覆蓋
缺點
- 局部修改時需要重新覆蓋
- 所有被修改的組件樣式都是一樣的
2.在.vue文件中修改
這種方法是在vue文件中新加一個style標(biāo)簽
用于修改一些特定的組件樣式，但不會全局應(yīng)用
比如，某個.vue文件中需要一個特別定制的table組件，而其它文件則需要用原來的樣式
這樣，我們最好的處理方式就是在.vue文件中新加一個style標(biāo)簽
在這里修改table的默認(rèn)樣式
<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 。 它限定了當(dāng)前table的修改樣式只能在該class以及其子元素中生效
否則，table的樣式仍會全局覆蓋
當(dāng)然，如果你愿意，可以將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>
這種方式的好處在于你可以動態(tài)的綁定某些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>
優(yōu)點
- 靈活自定義,可以動態(tài)綁定
- 不會全局修改
缺點
- 需要指定唯一的class作用域
3.修改組件的style樣式
這種方法我不是很推薦，拋開冗余不說，其實不敢保證其生效(依賴element-ui源碼的支持程度)。
但是，對于某些使用頻率很低但需要動態(tài)綁定屬性的組件，你可以使用它
比如這個<el-backtop>組件，我可能需要給它綁定一些動態(tài)的樣式屬性
這樣你就可給它綁定style
<el-backtop target="" :bottom="100" >
<div :style="{
height: 100%;
width: _width;
background-color: #f2f5f6;
box-shadow: 0 0 6px rgba(0,0,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%
}
}
優(yōu)點
- 靈活方便
- 動態(tài)綁定
缺點
- 冗余
- 耦合性高
4. 參考element-ui官方文檔的api
有些組件官網(wǎng)給了修改樣式的api
你可以按照api來指定組件的樣式
優(yōu)點
- 官方
缺點
- 支持組件較少
疑問
為何要新加一個style標(biāo)簽 ?
因為在實際使用過程中，我發(fā)現(xiàn)寫在帶有scoped屬性的某些class并不對element-ui的組件生效
這造成有的修改樣式可以用，有的不可以，所有就索性重新寫了了style標(biāo)簽
為何不用!important屬性
這家伙太霸道了，比全局修改還要強制。況且寫起來很麻煩
為何不用::v-deep穿透
首先，拋開寫法惡心來說，其耦合性太高
假如在你不需要樣式覆蓋的時候，你只需要刪除新的style標(biāo)簽
而用::v-deep 的話，逐行去改誰受得了
總結(jié)
上面的方法并不是很官方的做法，而是我日常開發(fā)中踩坑后，總結(jié)出來的方法
雖說不太完美，但很大程度上解決我的問題
到此這篇關(guān)于vue中element-ui組件默認(rèn)css樣式修改的文章就介紹到這了,更多相關(guān)vue element-ui組件默認(rèn)css樣式修改內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue中動態(tài)權(quán)限到按鈕的完整實現(xiàn)方案詳解
這篇文章主要為大家詳細(xì)介紹了Vue如何在現(xiàn)有方案的基礎(chǔ)上加入對路由的增、刪、改、查權(quán)限控制,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2025-03-03
VUE中如何優(yōu)雅實現(xiàn)爺孫組件的數(shù)據(jù)通信
所謂祖孫組件,也就是3層嵌套的組件,下面這篇文章主要給大家介紹了關(guān)于VUE中如何優(yōu)雅實現(xiàn)爺孫組件的數(shù)據(jù)通信的相關(guān)資料,需要的朋友可以參考下2022-04-04
vue3+elementui-plus實現(xiàn)無限遞歸菜單示例代碼
這篇文章主要介紹了vue3+elementui-plus實現(xiàn)無限遞歸菜單,當(dāng)一個組件的 key 值發(fā)生變化時,Vue 會認(rèn)為這是一個新的組件實例,會強制重新創(chuàng)建和渲染這個組件,本文通過示例代碼詳細(xì)講解,需要的朋友可以參考下2024-04-04
這篇文章主要介紹了詳解element-ui中form驗證雜記，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
這篇文章主要為大家詳細(xì)介紹了Vue3響應(yīng)式核心之effect的相關(guān)知識，文中的示例代碼講解詳細(xì)，對我們學(xué)習(xí)Vue3有一定的幫助，需要的可以參考一下2023-04-04
在Vue 中,可以使用 props 向子組件傳遞數(shù)據(jù)，下面這篇文章主要給大家介紹了關(guān)于vue父組件通過props如何向子組件傳遞方法的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面來一起看看吧。2017-08-08
Vue.js實現(xiàn)模擬微信朋友圈開發(fā)demo
本篇文章主要介紹了Vue.js實現(xiàn)模擬微信朋友圈開發(fā)demo，實現(xiàn)展示朋友圈，評論，點贊等功能，有興趣的可以了解一下。2017-04-04
Vue實現(xiàn)電商網(wǎng)站商品放大鏡效果示例
這篇文章主要為大家介紹了Vue實現(xiàn)電商網(wǎng)站商品放大鏡效果示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
unplugin-auto-import的配置以及eslint報錯解決詳解
unplugin-auto-import?解決了vue3-hook、vue-router、useVue等多個插件的自動導(dǎo)入,也支持自定義插件的自動導(dǎo)入,是一個功能強大的typescript支持工具,這篇文章主要給大家介紹了關(guān)于unplugin-auto-import的配置以及eslint報錯解決的相關(guān)資料,需要的朋友可以參考下2022-08-08
vue3中的reactive函數(shù)聲明數(shù)組方式
這篇文章主要介紹了vue3中的reactive函數(shù)聲明數(shù)組方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05