jquery-ui dialog 中动态控制 buttons?

默认的设置buttons，是这样的{buttons:{"按钮名1":function(){函数内容......},"按钮名2":function(){函数内容......},......}}

"按钮名":function(){函数内容......}

比如在页面有个按钮 id="btn" ,想通过$("#btn")控制dialog中的按钮是否显示的话，可以向下面这样做：

$(function(){

$("#btn").click(function(){

$(".ui-button-text").each(function(){

if($(this).text() == "按钮名1"){

$(this).attr("id","btnCancel")

return false

}

})

$("#btnCancel").parent().toggle()

})

})

原理就是：buttons:{……} 设置的名字，其实只是生成了一个<span>块，并为其文本节点赋值，而dialog插件会自动为其添加一个父元素<button>元素，因此切换显示/隐藏按钮，需要对这个父元素进行 *** 作。

希望对你有帮助！

最近使用vue+elementUI做项目，自然少不了dialog这个组件的使用，关于dialog嵌套有两个小问题总结下。

1.dialog嵌套时，内层dialog上有遮罩层，无法点击。

关于这个，其实官方网站在介绍嵌套的dialog时也有提到：

正常情况下，我们不建议使用嵌套的 Dialog，如果需要在页面上同时显示多个 Dialog，可以将它们平级放置。对于确实需要嵌套

Dialog 的场景，我们提供了append-to-body属性。将内层 Dialog 的该属性设置为 true，它就会插入至 body

元素上，从而保证内外层 Dialog 和遮罩层级关系的正确。

内层的dialog在使用时，需要加上append-to-body属性，官方诗示例为： <el-dialog width="30%" title="内层 Dialog" :visible.sync="innerVisible" append-to-body></el-dialog>

2.嵌套dialog为父子组件关系时，子组件（内层dialog）关闭后无法打开。关于这个问题，之前百度的方法都是在子组件监听父组件传过来的值，并在子组件的dialog执行close方法时，像父组件传递一个false的状态值。最近在查看官方有关计算属性的文档时，发现这个完全可以用计算属性解决，现将两种方法父子组件的代码分别示例，大家可根据个人习惯选择使用：

父组件代码段（两种方法相同）：

<template>

<div>

<el-button type="primary" @click="outerVisible = true">点击打开外层 Dialog</el-button>

<el-dialog title="外层 Dialog" :visible.sync="outerVisible">

确定删除这条信息吗？

<div slot="footer" class="dialog-footer">

<el-button @click="outerVisible = false">取 消</el-button>

<el-button type="primary" @click="innerVisible = true">确认</el-button>

</div>

</el-dialog>

<child :innerVisible="innerVisible" v-on:innerDialog="getInnerStatus($event)"></child>

</div>

</template>

<script>

import child from "./child"

export default {

name: "father",

components: { child },

data() {

return {

outerVisible: false,

innerVisible: false

}

},

methods: {

getInnerStatus(status) {

this.innerVisible = status

}

}

}

</script>

---