Vue2 使用 Element UI el-dialog 实现动态内容弹框：审核按钮和图片控制

可以使用弹框组件中的 prop 属性来控制是否显示审核按钮和图片。在触发弹框的地方根据需要传递不同的 prop 值。

示例代码：

弹框组件：

<template>
  <el-dialog :visible.sync='visible'>
    <div v-if='showAudit'>
      <h3>审核信息</h3>
      <img src='xxx.png' alt='审核图片'>
      <el-button @click='handleAudit'>审核通过</el-button>
    </div>
    <div v-else>
      <h3>详情信息</h3>
      <p>xxxxxx</p>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    visible: Boolean,
    showAudit: Boolean
  },
  methods: {
    handleAudit() {
      // 审核逻辑
    }
  }
}
</script>

触发弹框的地方：

<template>
  <div>
    <el-button @click='showAuditDialog'>审核</el-button>
    <el-button @click='showDetailDialog'>查看详情</el-button>
    <my-dialog :visible.sync='dialogVisible' :show-audit='dialogShowAudit'></my-dialog>
  </div>
</template>

<script>
import MyDialog from './MyDialog.vue'

export default {
  components: {
    MyDialog
  },
  data() {
    return {
      dialogVisible: false,
      dialogShowAudit: false
    }
  },
  methods: {
    showAuditDialog() {
      this.dialogVisible = true
      this.dialogShowAudit = true
    },
    showDetailDialog() {
      this.dialogVisible = true
      this.dialogShowAudit = false
    }
  }
}
</script>