template
<el-button type="text" @click="dialogVisible = true">點選打開 Dialog</el-button>
<el-dialog
title="提示"
:visible.sync="dialogVisible"
width="80%"
:append-to-body="true"
:before-close="handleClose"
:close-on-click-modal="false">
<span>這是一段資訊</span>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
</span>
</el-dialog>
data
dialogVisible:false,
methods
closeShadow(){
this.dialogVisible=false;
},
handleClose(done) {
this.$confirm('确認關閉?')
.then(_ => {
done();
})
.catch(_ => {});
}
close-on-click-modal:是否可以通過點選 modal 關閉 Dialog 預設值為true
更多api參照官網:https://element.eleme.cn/#/zh-CN/component/quickstart
另外上面有一個屬性還比較有用:
:modal-append-to-body='true' 是否将遮罩層添加在body元素裡,如果為false就是插在el-dialog的父級元素裡,
.thisDialog{
z-index:200 !important;
}
.app-container >>> .v-modal{
z-index:199 !important;
}