Vue+Element项目中根据业务状态封装业务对应的颜色，用于标识某一行数据的颜色

背景

几乎每个页面都有自己的状态，所以经过和产品以及设计师沟通后确定了适用于业务的状态色。

虽然Element 中已经有了el-tag 可以表示一些状态，但是每个项目的业务需求会有差异，伴随着这些差异，并结合自己项目的特点，封装了适用于项目的状态。

假设每个页面都有自己的状态表示，虽然表示状态的颜色在整体项目上来说是一致的，但是由于每个页面的业务不一样，表示每个页面的各自的状态值也会有所差异，直接让后端返回颜色值也不现实，所以封装了统一的公共组件。

全局组件内容如下

<template>
  <div :class="['status-tag']">
    <el-tag :type="statusToType()">
      <slot></slot>
      {
     {
      text }}
    </el-tag>
  </div>
</template>

<script lang="ts">
import {
      Component, Prop, Vue, Watch, Emit } from "vue-property-decorator";

@Component({
     })
export default class StatusTag extends Vue {
     
  /* options 对象
   *  status  当前状态           必须
   *  color
   *      success 绿色           成功
   *      danger  红色           危险
   *      cancel  灰色           取消等状态
   *      warning 橙黄色          需要关注的状态
   *      processing 主题色蓝色    正在处理中的状态 
   * 
   * */
  @Prop({
      default: "", type: String }) text;
  @Prop({
     
    default: () => {
     
      return {
     };
    },
    type: Object
  })
  options;

  statusToType() {
     
    let {
      status, color} = this.options;
    let map: any = {
     };

    if (color instanceof Array && color.length > 0) {
     
      color.forEach(coloritem => {
     
        Object.entries(coloritem).forEach(v => {
     
          if (v[1] instanceof Array) {
     
            v[1].forEach(i => {
     
              return (map[i] = v[0]);
            });
          } else {
     
            let key: any = v[1];
            return (map[key] = v[0]);
          }
        });
      });
    }

    return map[status] || "processing";
  }
}
</script>
<style lang="scss">
//  在全局CSS变量中定义公用的变量
//  $--font-family-primary
//  $--color--status--success
//  $--color--status--danger
//  $--color--status--cancel
//  $--color--status--warning 
.status-tag {
     
  .el-tag {
     
    padding: 0 12px;
    border-radius: 10px;
    border: none;
    font-family: $--font-family-primary;
    &.el-tag {
     
      &--success {
     
        background-color: $--color--status--success !important;
      }

      &--danger {
     
        background-color: $--color--status--danger !important;
      }

      &--cancel {
     
        background-color: $--color--status--cancel !important;
      }

      &--warning {
     
        background-color: $--color--status--warning !important;
      }

      &--processing {
     
        background-color: $--color--status--processing !important;
      }

    }
  }
}
</style>

在具体的需要展示状态色的表格中使用如下，这样每个页面都可以根据自己的状态值去匹配状态色。

            <el-table-column
              prop="statusString"
              label="Status"
              fixed="right"
              width="100px"
            >
              <div slot-scope="{ row: { statusString, status } }">
              // sttusString 状态对应的文案  status 状态对应的value值
                <StatusTag
                  :text="statusString"
                  :options="{
     
                    status,
                    color: [
                      {
     
                        warning: ['1'],
                        processing: ['2', '3', '4'],
                        success: ['5'],
                        cancel: ['6', '7'],
                        danger:'8'
                      }
                    ]
                  }"
                >
                </StatusTag>
               </div>
              </el-table-column>