vue3实现审核弹窗

在Vue3中实现审核弹窗通常会涉及到组件化的开发思路，可以创建一个通用的审核组件，然后在需要的地方通过props或事件来触发这个组件的显示。以下是一个简单的步骤概述：

1. **创建审核组件**:
首先，创建一个新的 Vue 组件，例如 `AuditModal.vue`，它包含一个显示/关闭状态、标题、内容以及提交按钮等基本元素。使用 `v-model` 或者自定义事件控制其显示隐藏。

<template>
  <div class="audit-modal" v-if="show">
    <header>审核信息</header>
    <p>{{ content }}</p>
    <button @click="handleApprove">批准</button>
    <button @click="handleReject">驳回</button>
  </div>
</template>

<script>
export default {
  props: {
    show: { type: Boolean, default: false }, // 显示状态
    content: { type: String, required: true } // 审核内容
  },
  methods: {
    handleApprove() {
      this.$emit('approve'); // 发送事件通知处理
    },
    handleReject() {
      this.$emit('reject'); // 可能会有类似操作
    }
  }
};
</script>

2. **在父组件中使用**:
然后，在需要审核功能的父组件中引入并绑定这个组件，比如在一个列表的点击事件中打开：

<template>
  <ul>
    <li v-for="item in items" :key="item.id">
      <button @click="openAudit(item)">审核</button>
      <!-- 其他内容 -->
    </li>
  </ul>
  <audit-modal v-if="isShowing" :content="currentItem.content" @approve="handleApprove" @reject="handleReject"></audit-modal>
</template>

<script>
import AuditModal from './AuditModal.vue';

export default {
  components: {
    AuditModal
  },
  data() {
    return {
      isShowing: false,
      currentItem: null,
    };
  },
  methods: {
    openAudit(item) {
      this.currentItem = item;
      this.isShowing = true; // 显示审核模态
    },
    handleApprove() {
      // 执行审核批准的逻辑
    },
    handleReject() {
      // 执行审核驳回的逻辑
    }
  }
};
</script>