element?ui組件中element.style怎么改詳解
更新時(shí)間：2023年06月02日 09:39:19 作者：q249859693
element.style是一種內(nèi)聯(lián)樣式,一般都是代碼里寫死的,下面這篇文章主要給大家介紹了關(guān)于element?ui組件中element.style怎么改的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下
比如抽屜（el-drawer）的element.style的width
方法1：修改element組件自帶的屬性
<el-drawer size="60%">
如果沒有該屬性則用方法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/還有>>>寫法不一樣，作用相同
<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呢？要一級級從父級向下查找。
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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
iview給radio按鈕組件加點(diǎn)擊事件的實(shí)例
下面小編就為大家?guī)硪黄猧view給radio按鈕組件加點(diǎn)擊事件的實(shí)例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
v-model通常用于input的雙向數(shù)據(jù)綁定,它并不會向子組件傳遞數(shù)據(jù),下面這篇文章主要給大家介紹了關(guān)于vue2和vue3組件v-model區(qū)別的相關(guān)資料,需要的朋友可以參考下2023-06-06
vue-resource?獲取本地json數(shù)據(jù)404問題的解決
這篇文章主要介紹了vue-resource?獲取本地json數(shù)據(jù)404問題的解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了前端必知必會之Vue?$emit()方法的相關(guān)資料,Vue.js中的$emit()方法用于在子組件中創(chuàng)建自定義事件,并在父組件中捕獲這些事件,這在需要從子組件向父組件傳遞信息的大型項(xiàng)目中非常有用,需要的朋友可以參考下2025-02-02
Vue項(xiàng)目從webpack3.x升級webpack4不完全指南
前段時(shí)間，泡面將自己的一個(gè)Vue-cli構(gòu)建的前端框架從webpack3.x升級到了4.x版本，現(xiàn)在才拉出來記錄一下，已備忘之用，也和大家分享一下,需要的朋友可以參考下2019-04-04
使用Element的InfiniteScroll 無限滾動組件報(bào)錯的解決
這篇文章主要介紹了使用Element的InfiniteScroll 無限滾動組件報(bào)錯的解決，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
Vue使用路由鉤子攔截器beforeEach和afterEach監(jiān)聽路由
這篇文章主要介紹了Vue使用路由鉤子攔截器beforeEach和afterEach監(jiān)聽路由,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-11-11
vue+elementUI中el-radio設(shè)置默認(rèn)值方式
這篇文章主要介紹了vue+elementUI中el-radio設(shè)置默認(rèn)值方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12
這篇文章主要介紹了Vue渲染失敗的幾種原因及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)移動端圖片裁剪上傳功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08