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

q249859693

已于 2022-07-13 16:21:46 修改

阅读量7.9k

点赞数 5

文章标签： elementui vue.js javascript

于 2022-03-10 11:30:19 首次发布

本文链接：https://blog.csdn.net/q249859693/article/details/123395475

版权

本文介绍了在Element UI框架中修改el-drawer组件宽度的三种方法：一是通过组件属性直接设置；二是使用CSS，包括不加scoped和加scoped的情况；三是利用JavaScript动态修改DOM元素样式。详细步骤和代码示例分别给出，帮助开发者解决自定义组件样式的问题。

摘要由CSDN通过智能技术生成

比如抽屉（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%'
  }