vue el-dialog嵌套第二层出现在第一层弹窗下面解决?属性都加上了也不生效啊
第二层弹窗 加个append-to-body
没问题的啊
<el-button type="text" @click="dialogVisible = true"
>点击打开 Dialog</el-button
>
<el-dialog
title="提示"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose"
>
<span>这是一段信息</span>
<el-button @click="showDialog1">666</el-button>
<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>
<el-dialog
title="提示"
:visible.sync="dialogVisible1"
width="20%"
:before-close="handleClose1"
>
<span>这是另一段信息</span>
</el-dialog>
export default {
data() {
return {
dialogVisible: false,
dialogVisible1: false
}
},
computed: {},
mounted() {
},
methods: {
showDialog1() {
this.dialogVisible1 = true;
},
handleClose(done) {
this.$confirm('确认关闭?')
.then(_ => {
done();
})
.catch(_ => { });
},
handleClose1(done) {
this.$confirm('确认关闭?')
.then(_ => {
done();
})
.catch(_ => { });
}
}
}
【相关推荐】
elementui
自定义内容的示例展示提供了很便捷的插槽方式,唯一要注意的是,我们把click事件中的处理的参数变成自己的就好了, <div slot="footer" class="dialog-footer">
<el-button @click="dialogVisiable = false">取 消</el-button>
<el-button type="primary" @click="dialogVisiable = false">确 定</el-button>
</div>