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

在 Vue3 中，你可以很容易地在一个页面上同时使用多个 `ElDialog` 组件。一个常用的场景是将一个 `ElDialog` 设置为默认状态（即常显示），而另一个设置为动态条件显示。以下是基本步骤：

1. 首先，在你的组件模板中引入 `ElDialog` 组件，并给每个 dialog 分配一个变量，例如：

<template>
  <div>
    <!-- 常显示的dialog -->
    <el-dialog v-model="dialog1Visible" title="常显示的对话框">
      <p>这是常显示的内容</p>
    </el-dialog>

    <!-- 动态显示的dialog -->
    <button @click="showSecondDialog">点击展示第二个对话框</button>
    <el-dialog v-model="dialog2Visible" :modal="false" title="点击弹出的对话框" @close="dialog2Visible = false">
      <p>这是点击事件后弹出的内容</p>
    </el-dialog>
  </div>
</template>

2. 在 script 标签中，创建对应的 data 对象成员并初始化它们：

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

const dialog1Visible = ref(true); // 常显的对话框初始为可见
const dialog2Visible = ref(false); // 可点击后显示的对话框初始为不可见

function showSecondDialog() {
  dialog2Visible.value = true; // 当点击按钮时，显示dialog2
}
</script>

这样，当你在页面上加载时，第一个对话框就会自动显示，而第二个对话框只有在用户点击 "点击展示第二个对话框" 按钮时才会弹出。记得在关闭第二个对话框时更新 `dialog2Visible` 的值。