如何自定义el-dialog的具体宽度,而不影响页面内的其他el-dialog的宽度

我们在使用elementUI的对话框el-dialog中发现,设置的默认宽度是百分比,比如width=“30%”,这样对话框会随着页面的宽度而自适应,但是如果我们只想要,无论页面有多宽,对话框都是固定的宽度,不随着页面的宽度而自适应呢?

通过el-dialog的custom-class属性,这个属性是给该对话框加一个专属的class

在这里插入图片描述

操作如下:

第一步:在el-dialog中加入custom-class

 <el-dialog title="另存为" :visible.sync="dialogVisible" :before-close="handleClose" custom-class="saveAsDialog">`

第二步:在style中写样式,记得要加/deep/(less中的用法),或::deep(普通的style中的用法)

/deep/ .saveAsDialog {
  width: 480px !important;
}

只要在同一个页面中,设置的custom-class不同名,就不会影响到该页面其他的el-dialog啦!

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐