VUE3中 如何在一个页面中放两个el-dialog，一个常显示，另外一个在点击某个按钮才弹窗显示

在 Vue3 中，想要在一个页面上同时显示两个 `el-dialog`，一个作为常规固定的，另一个需要在特定条件下动态弹出，你可以这样做：

1. 首先，在你的组件模板 (`template`) 中创建两个 `el-dialog` 的引用，一个是固定的，另一个是变量绑定的：

<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` 函数中初始化这两个对话框的可见状态：

<script setup>
import { ref } from 'vue';

// 定义固定对话框是否可见的 ref
const fixedDialogVisible = ref(true);

// 定义动态对话框是否可见的 ref，并初始化为 false
let dynamicDialogVisible = ref(false);
</script>

3. 当你需要在点击按钮时动态打开第二个对话框时，添加 `openDynamicDialog` 方法：

<script setup>
function openDynamicDialog() {
  dynamicDialogVisible.value = true; // 设置动态对话框可见
}
</script>

现在，当你页面加载时，常规对话框会默认显示，点击 "点击打开" 按钮后，动态对话框才会弹出。