欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue中element-ui組件默認(rèn)css樣式修改的四種方式

 更新時間:2021年10月05日 10:46:20   作者:油炸皮卡丘  
在前端項目中會運用各種組件,有時組件的默認(rèn)樣式并不是你項目中所需要的,你需要更改樣式,下面這篇文章主要給大家介紹了關(guān)于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路由后界面沒有變化,但是鏈接有的問題

    解決vue路由后界面沒有變化,但是鏈接有的問題

    今天小編就為大家分享一篇解決vue路由后界面沒有變化,但是鏈接有的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • Element Plus的el-icon怎么用

    Element Plus的el-icon怎么用

    在Element Plus里,Icon圖標(biāo)的用法和以前不一樣了,本文主要介紹了Element Plus的el-icon怎么用,具有一定的參考價值,感興趣的可以了解一下
    2022-04-04
  • 一文帶你掌握Vue中的路由守衛(wèi)

    一文帶你掌握Vue中的路由守衛(wèi)

    路由守衛(wèi)(Route?Guards)是?Vue?Router?的一個功能,它允許我們在路由發(fā)生之前執(zhí)行邏輯判斷,這篇文章主要為大家介紹了Vue中路由守衛(wèi)的具體應(yīng)用,需要的可以了解下
    2024-03-03
  • vue treeselect獲取當(dāng)前選中項的label實例

    vue treeselect獲取當(dāng)前選中項的label實例

    這篇文章主要介紹了vue treeselect獲取當(dāng)前選中項的label實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-08-08
  • 5種vue模糊查詢的方法總結(jié)

    5種vue模糊查詢的方法總結(jié)

    在Vue中,有多種方式可以實現(xiàn)模糊查詢,這篇文章主要介紹了5種vue中的常用方法,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
    2023-08-08
  • vue.js簡單配置axios的方法詳解

    vue.js簡單配置axios的方法詳解

    axios是一個基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端,下面這篇文章主要給大家介紹了關(guān)于vue.js簡單配置axios的相關(guān)資料,需要的朋友們可以參考借鑒,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧。
    2017-12-12
  • Vue為何棄用Ajax,選擇Axios?ajax與axios的區(qū)別?

    Vue為何棄用Ajax,選擇Axios?ajax與axios的區(qū)別?

    ajax技術(shù)實現(xiàn)了局部數(shù)據(jù)的刷新,axios實現(xiàn)了對ajax的封裝;axios有的ajax都有,ajax有的axios不一定有??偨Y(jié)一句話就是axios是ajax,ajax不止axios。
    2023-01-01
  • 使用vue.js寫一個tab選項卡效果

    使用vue.js寫一個tab選項卡效果

    Vue 實現(xiàn) Tab切換實現(xiàn)的場景很多,比如,利用vue-router、利用第三方插件、利用組件等等.本文使用組件來實踐tab選項卡
    2017-03-03
  • 解決vue-cli項目打包出現(xiàn)空白頁和路徑錯誤的問題

    解決vue-cli項目打包出現(xiàn)空白頁和路徑錯誤的問題

    今天小編就為大家分享一篇解決vue-cli項目打包出現(xiàn)空白頁和路徑錯誤的問題。具有很好的參考價值。希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • vue.js學(xué)習(xí)筆記之v-bind和v-on解析

    vue.js學(xué)習(xí)筆記之v-bind和v-on解析

    這篇文章主要介紹了vue.js學(xué)習(xí)筆記之v-bind和v-on解析,v-bind 指令用于響應(yīng)地更新 HTML 特征,v-on 指令用于監(jiān)聽DOM事件,文中還給大家提到了v-bind,v-on的縮寫,感興趣的朋友參考下吧
    2018-05-05

最新評論