element ui组件的element.style怎么改？

比如抽屉（el-drawer）的element.style的width先在el-drawer外面建一个盒子，防止影响其他组件样式<div class="eldrawer"><el-drawer></el-drawer></div>在样式里修改el-drawer的width,一定要加上!important.eldrawer .el-drawer {wi

q249859693

7606人浏览 · 2022-03-10 11:30:19

q249859693 · 2022-03-10 11:30:19 发布

比如抽屉（el-drawer）的element.style的width

在这里插入图片描述

方法1：修改element组件自带的属性

在这里插入图片描述

<el-drawer size="60%">

如果没有该属性则用方法2或方法3

方法2：CSS修改

先在el-drawer外面建一个盒子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修改样式
怎么找到这个组件需要修改的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%'
  }