elementui怎么写两个Dialog
时间: 2023-10-07 08:04:08 浏览: 304
要在 Element UI 中编写两个 Dialog,您可以使用不同的组件实例来创建它们。以下是一个示例:
```vue
<template>
<div>
<el-button @click="openDialog1">打开对话框1</el-button>
<el-button @click="openDialog2">打开对话框2</el-button>
<el-dialog :visible.sync="dialog1Visible">
<span>对话框1内容</span>
</el-dialog>
<el-dialog :visible.sync="dialog2Visible">
<span>对话框2内容</span>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
dialog1Visible: false,
dialog2Visible: false
};
},
methods: {
openDialog1() {
this.dialog1Visible = true;
},
openDialog2() {
this.dialog2Visible = true;
}
}
};
</script>
```
在上面的示例中,我们使用了 `dialog1Visible` 和 `dialog2Visible` 两个变量来控制对话框的可见性。通过点击按钮,可以分别打开对话框1和对话框2。每个对话框都有自己独立的内容。
请根据您的需求进行自定义和调整。希望这可以帮助到您!
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)