element遮罩_element-ui遮罩层el-dialog的使用

template

点击打开 Dialog

title="提示":visible.sync="dialogVisible"width="80%"

:append-to-body="true"

:before-close="handleClose":close-on-click-modal="false">

这是一段信息

取 消

确 定

data

dialogVisible:false,

methods

closeShadow(){this.dialogVisible=false;

},

handleClose(done) {this.$confirm('确认关闭？')

.then(_=>{

done();

})

.catch(_ =>{});

}

close-on-click-modal：是否可以通过点击 modal 关闭 Dialog  默认值为true

另外上面有一个属性还比较有用：

:modal-append-to-body='true'  是否将遮罩层添加在body元素里，如果为false就是插在el-dialog的父级元素里，

那么当我们遇到，弹窗里有弹窗，而且里面的弹窗没有遮罩层的z-index属性大时，就会出现里面弹层内的内容被遮罩层挡住的问题，如果我们让遮罩层加在body上，有点不好控制z-index属性，如果让加在el-dialog的父元素里，我们在当前组件就可以控制这一个遮罩成的z-index属性，

.thisDialog{z-index:200 !important;

}.app-container >>> .v-modal{z-index:199 !important;

}

。