vue3不同按钮不同对话框

在 Vue 3 中，你可以通过条件渲染来实现不同按钮对应不同的对话框。以下是一个简单的示例：

<template>
  <div>
    <button @click="openDialog('dialog1')">打开对话框1</button>
    <button @click="openDialog('dialog2')">打开对话框2</button>

    <div v-if="activeDialog === 'dialog1'">
      <!-- 对话框1的内容 -->
      <h2>对话框1</h2>
      <p>这是对话框1的内容。</p>
    </div>

    <div v-if="activeDialog === 'dialog2'">
      <!-- 对话框2的内容 -->
      <h2>对话框2</h2>
      <p>这是对话框2的内容。</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeDialog: null
    };
  },
  methods: {
    openDialog(dialog) {
      this.activeDialog = dialog;
    }
  }
};
</script>

在上面的示例中，我们有两个按钮，分别绑定了 `openDialog` 方法，并传入了不同的对话框标识符。当点击按钮时，`openDialog` 方法会将 `activeDialog` 的值更新为相应的对话框标识符。然后，使用 `v-if` 指令根据 `activeDialog` 的值来渲染不同的对话框内容。

你可以根据需要自定义每个对话框的内容和样式。希望这个示例能对你有所帮助！