VUE3中 如何在一个页面中放两个el-dialog,一个常显示,另外一个在点击某个按钮才弹窗显示
时间: 2024-11-03 07:14:12 浏览: 73
在 Vue3 中,想要在一个页面上同时显示两个 `el-dialog`,一个作为常规固定的,另一个需要在特定条件下动态弹出,你可以这样做:
1. 首先,在你的组件模板 (`template`) 中创建两个 `el-dialog` 的引用,一个是固定的,另一个是变量绑定的:
```html
<template>
<div>
<!-- 常规显示的 dialog -->
<el-dialog :visible.sync="fixedDialogVisible" title="固定对话框">
...内容...
</el-dialog>
<!-- 可动态显示的 dialog -->
<el-button @click="openDynamicDialog">点击打开</el-button>
<el-dialog v-if="dynamicDialogVisible" :visible.sync="dynamicDialogVisible" title="动态对话框">
...内容...
</el-dialog>
</div>
</template>
```
2. 然后,在 `data` 或者 `setup` 函数中初始化这两个对话框的可见状态:
```js
<script setup>
import { ref } from 'vue';
// 定义固定对话框是否可见的 ref
const fixedDialogVisible = ref(true);
// 定义动态对话框是否可见的 ref,并初始化为 false
let dynamicDialogVisible = ref(false);
</script>
```
3. 当你需要在点击按钮时动态打开第二个对话框时,添加 `openDynamicDialog` 方法:
```js
<script setup>
function openDynamicDialog() {
dynamicDialogVisible.value = true; // 设置动态对话框可见
}
</script>
```
现在,当你页面加载时,常规对话框会默认显示,点击 "点击打开" 按钮后,动态对话框才会弹出。
阅读全文