vue el-dialog嵌套第二层出现在第一层弹窗下面解决?属性都加上了也不生效啊

vue el-dialog嵌套第二层出现在第一层弹窗下面解决?属性都加上了也不生效啊

第二层弹窗 加个append-to-body

没问题的啊

img

<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(_ => { });
        }
    }
}

img

【相关推荐】



  • 你可以看下这个问题的回答https://ask.csdn.net/questions/7791799
  • 你也可以参考下这篇文章:在vue中使用 dialog 弹窗
  • 除此之外, 这篇博客: vue子组件弹窗 el-dialog中的 弹窗的确定和取消 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:

    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>
    

    在这里插入图片描述


如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^