vue 一个组件内多个弹窗

在 Vue 中，可以使用一个组件来实现多个弹窗的功能。可以在组件内部定义多个弹窗的状态，然后在需要弹出弹窗的地方，使用 v-if 或者 v-show 来控制弹窗的显示与隐藏。

以下是一个示例代码：

<template>
  <div>
    <button @click="showDialog1 = true">打开弹窗1</button>
    <button @click="showDialog2 = true">打开弹窗2</button>

    <div v-if="showDialog1">
      <h2>弹窗1</h2>
      <button @click="showDialog1 = false">关闭</button>
    </div>

    <div v-if="showDialog2">
      <h2>弹窗2</h2>
      <button @click="showDialog2 = false">关闭</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showDialog1: false,
      showDialog2: false,
    };
  },
};
</script>

在上面的代码中，我们定义了两个弹窗的状态：showDialog1 和 showDialog2。当点击打开弹窗的按钮时，会将对应的状态设置为 true，从而显示弹窗。当点击关闭按钮时，会将对应的状态设置为 false，从而隐藏弹窗。

你可以根据自己的需求，自定义弹窗的样式和交互逻辑。