页面传值控制状态显示

父页面

<v-status class="icon-back" :status="isSubmitState"/>
data:isSubmitState//控制传值
.icon-back {
    position: absolute;
    right: 190px;
    width: 100px;
    height: 40px;
  }

子页面

<!-- 状态显示 -->
<template>
  <!-- 容器 -->
  <div :class="['status-tip-container', activeClassName]">
    {{content}}
  </div>
</template>
<script>

/**
 * 上报状态
 */
const SUBMIT_STATUS = {
  NO_SUBMIT: 2, //未上报
  SUBMIT: 0, //已上报
  REJECT: 1, //已退回
};

export default {
  props: {
    status: {
      type: Number,
      default: SUBMIT_STATUS.NO_SUBMIT,
    }, //状态字段
  },
  data() {
    return {
      SUBMIT_STATUS,
    };
  },
  methods: {},
  computed: {
    /**
     * 显示的内容
     */
    content() {
      switch (this.status) {
        case SUBMIT_STATUS.NO_SUBMIT:
          return '未上报';
        case SUBMIT_STATUS.SUBMIT:
          return '已上报';
        case SUBMIT_STATUS.REJECT:
          return '已退回';
        default:
          return '';
      }
    },
    /**
     * 1、状态的动态className
     * 2、如果是被退回的，则从随机颜色里面取一个随机数
     */
    activeClassName() {
      switch (this.status) {
        case SUBMIT_STATUS.NO_SUBMIT:
          return 'status-no-submit';
        case SUBMIT_STATUS.SUBMIT:
          return 'status-submit';
        case SUBMIT_STATUS.REJECT:
          let arr = ['1', '2', '3'];
          let rand = Math.floor(Math.random() * arr.length);
          return `status-reject-${arr[rand]}`;
        default:
          return '';
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.status-tip-container {
  position: relative;
  display: inline-block;
  width: 100px;
  height: 40px;
  line-height: 30px;
  box-sizing: border-box;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  transform: rotate(-10deg);
  border-radius: 4px;
  top: 10px;
  z-index: 999;
  &.status-no-submit {
    color: #faad14;
    border: 4px solid #faad14;
  }
  &.status-submit {
    color: #52c41a;
    border: 4px solid #52c41a;
  }
  &.status-reject-1 {
    color: #f5222d;
    border: 4px solid #f5222d;
  }
  &.status-reject-2 {
    color: #722ed1;
    border: 4px solid #722ed1;
  }
  &.status-reject-3 {
    color: #eb2f96;
    border: 4px solid #eb2f96;
  }
  .status-tip-reason {
    position: absolute;
    top: -25px;
    left: -260px;
    width: 250px;
    font-size: 16px;
    text-align: right;
    transform: rotate(10deg);
  }
}
</style>