快捷導(dǎo)航

element?ui組件中element.style怎么改詳解

更新時(shí)間：2023年06月02日 09:39:19 作者：q249859693

element.style是一種內(nèi)聯(lián)樣式,一般都是代碼里寫(xiě)死的,下面這篇文章主要給大家介紹了關(guān)于element?ui組件中element.style怎么改的相關(guān)資料,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下

方法1：修改element組件自帶的屬性

<el-drawer size="60%">

如果沒(méi)有該屬性則用方法2或方法3

方法2：CSS修改

先在el-drawer外面建一個(gè)盒子eldrawer，防止影響其他組件樣式

使用!important

一 . style 不加scoped

<div class="eldrawer">
	<el-drawer>
	</el-drawer>
</div>

<style>
.eldrawer .el-drawer {
  width: 60% !important;
}
</style>

二 . style 加scoped

必須加::v-deep樣式穿透

::v-deep和/deep/還有>>>寫(xiě)法不一樣，作用相同

<div class="eldrawer">
	<el-drawer>
	</el-drawer>
</div>

<style scoped>
.eldrawer ::v-deep .el-drawer {
  width: 85% !important;
}
</style>

方法3：用js修改dom元素樣式

先要找到需要修改dom元素，在用js修改樣式

怎么找到這個(gè)組件需要修改的dom呢？要一級(jí)級(jí)從父級(jí)向下查找。

mounted () {
	// 最好第一次查找自己定義的class（eldrawer）名，以免影響其他該組件
	var a = document.getElementsByClassName("eldrawer")[0]
    console.log(a);
    var b = a.getElementsByClassName('el-drawer__container')[0]
    console.log(b);
    var c = b.getElementsByClassName('el-drawer')[0]
    console.log(c);
    c.style.width = ' 60%'
    //document.getElementsByClassName("el-drawer__wrapper")[0].getElementsByClassName('el-drawer__container')[0].getElementsByClassName('el-drawer')[0].style.width = ' 60%'
  }

總結(jié)

到此這篇關(guān)于element ui組件中element.style怎么改的文章就介紹到這了,更多相關(guān)elementui組件element.style修改內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

Vue單頁(yè)面應(yīng)用做預(yù)渲染的方法實(shí)例
vue是一個(gè)單頁(yè)面的應(yīng)用,這導(dǎo)致一些爬蟲(chóng)和百度無(wú)法搜索到,如果你想針對(duì)你應(yīng)用的其中某些頁(yè)面進(jìn)行SEO優(yōu)化,讓他們可以被爬蟲(chóng)和百度搜索到,你可以進(jìn)行預(yù)渲染操作,下面這篇文章主要給大家介紹了關(guān)于Vue單頁(yè)面應(yīng)用做預(yù)渲染的相關(guān)資料,需要的朋友可以參考下
2021-10-10
關(guān)于element中el-cascader的使用方式
這篇文章主要介紹了關(guān)于element中el-cascader的使用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-08-08
vue項(xiàng)目中跳轉(zhuǎn)到外部鏈接的實(shí)例講解
今天小編就為大家分享一篇vue項(xiàng)目中跳轉(zhuǎn)到外部鏈接的實(shí)例講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
vue 驗(yàn)證碼界面實(shí)現(xiàn)點(diǎn)擊后標(biāo)灰并設(shè)置div按鈕不可點(diǎn)擊狀態(tài)
今天小編就為大家分享一篇vue 驗(yàn)證碼界面實(shí)現(xiàn)點(diǎn)擊后標(biāo)灰并設(shè)置div按鈕不可點(diǎn)擊狀態(tài)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-10-10
vue中如何動(dòng)態(tài)獲取剩余區(qū)域的滾動(dòng)高度
這篇文章主要介紹了vue中如何動(dòng)態(tài)獲取剩余區(qū)域的滾動(dòng)高度問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-05-05
詳解Vue2 添加對(duì)scss的支持
這篇文章主要介紹了詳解Vue2 添加對(duì)scss的支持，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-01-01
vue打開(kāi)其他項(xiàng)目頁(yè)面并傳入數(shù)據(jù)詳解
這篇文章主要給大家介紹了關(guān)于vue打開(kāi)其他項(xiàng)目頁(yè)面并傳入數(shù)據(jù)的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-11-11
vue搜索頁(yè)開(kāi)發(fā)實(shí)例代碼詳解（熱門(mén)搜索，歷史搜索，淘寶接口演示）
這篇文章主要介紹了vue搜索頁(yè)開(kāi)發(fā)實(shí)例（熱門(mén)搜索，歷史搜索，淘寶接口演示）,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-04-04
vue3通過(guò)render函數(shù)實(shí)現(xiàn)菜單下拉框的示例
本文主要介紹了vue3通過(guò)render函數(shù)實(shí)現(xiàn)菜單下拉框的示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-04-04
vue3 setup中defineEmits與defineProps的使用案例詳解
在父組件中定義String、Number、Boolean、Array、Object、Date、Function、Symbol這些類(lèi)型的數(shù)據(jù),使用defineEmits會(huì)返回一個(gè)方法,使用一個(gè)變量emits(變量名隨意)去接收,本文給大家介紹vue3 setup中defineEmits與defineProps的使用案例,感興趣的朋友一起看看吧
2023-10-10