element中el-dialog踩坑一

element中el-dialog踩坑一

1.开发环境 vue+element
2.电脑系统 windows10专业版
3.在使用 vue+element开发的过程中,我们可能会使用到el-dialog,下面是我对el-dialog分享,希望对你有所帮助!
4.在template中添加如下代码:

5.在css中添加如下代码:

//覆盖默认高度和默认间距
.el-dialog {
  height: 90%;
  margin-top: 8vh !important;
}

//修改中间模块的高度
.el-dialog__body {
  height: 94%;
  padding: 0 !important;
}
/* 覆盖 el-dialog的默认高度 结束啦 */

/* 覆盖 el-dialog 默认的背景色 */
.el-dialog,
.el-pager li {
  background-image: url("../assets/images/nybj.png") !important;
  background-repeat: no-repeat;
}

//注意 : el-dialog 的父级一定要有宽和高,不然不生效

5.效果图如下:

6.本期的效果到了这里就结束啦,是不是很nice,希望对你有所帮助,让我们一起努力走向巅峰!