caimei-authentic-manager/src/components/AuditStatus/index.vue

<template>
  <div>
    <span v-if="status === 2" class="status warning">待审核</span>
    <span v-if="status === 1" class="status success">审核通过</span>
    <!-- 未通过原因展示 -->
    <template v-if="status === 0">
      <el-popover placement="top-start" title="审核说明" width="400" trigger="hover" :content="reason">
        <div slot="reference">
          <span class="status danger">审核未通过</span>
          <span class="el-icon-question status danger" />
        </div>
      </el-popover>
    </template>
  </div>
</template>
<script>
export default {
  name: 'AuditStatus',
  props: {
    status: {
      type: Number,
      default: 0
    },
    reason: {
      type: String,
      default: ''
    }
  }
}
</script>