前端根据不同的状态码使盒子展示不同的背景色、字体色、图标功能实现

一、前言/背景数据

后端返回的详情对象内部有status四个状态1:待提交，2:待审核，3:已审核 4:已撤销

二、场景

根据不同的状态判断，页面展示不同的背景色、字体色、图标

三、实现方案

js实现代码：

  data() {
    return {
      // 顶部动态展示数据
      headerData: {
        // 待提交
        1: {
          bgc: "#EEF7FF",
          color: "#51A6FF",
          icon: require("../../../../assets/image/icon_tijiao.png"),
        },
        // 待审核
        2: {
          bgc: "#FFF4E7",
          color: "#EF8F22",
          icon: require("../../../../assets/image/icon_shenhe.png"),
        },
        // 已审核
        3: {
          bgc: "#F0FBF5",
          color: "#3FD27B",
          icon: require("../../../../assets/image/check-circle.png"),
        },
        // 已撤销
        4: {
          bgc: "#F7F9FF",
          color: "#8A96A0",
          icon: require("../../../../assets/image/icon_chexiao.png"),
        },
      },
    };
  },

再data内部定义一个对象，对象内部分别写入四个状态码，每个状态码包含不同数据展示不同内容的属性；其中bgc代表背景色属性，color设置font-color字体色，icon代表图标路径；

dom实现代码：

 <el-row  v-if="detailInfo.status"   :style="`color:${headerData[detailInfo.status].color}`"   >
      <el-col  :span="21" :style="`background-color:${headerData[detailInfo.status].bgc}`" >
         <span>耳缺记录</span>
      </el-col>
      <el-col  :span="3"  :style="`background-color:${headerData[detailInfo.status].bgc}`"    >
         <span>{{ earStatus[detailInfo.status] }}</span>
         <img :src="headerData[detailInfo.status].icon" class="img" alt="" />
      </el-col>
    </el-row>

如果出现报错为题，在盒子最外层添加判断： v-if=“detailInfo.status”，解决在dom渲染过程中的报错问题；如果detailInfo.status内部有值，再走一下dom渲染等操作

场景二

根据不同的机型展示不同的背景图

html

<div class="login-page" :style="bacImage"></div>

js

data() {
    return {
      bacImageUrl: "", //动态背景图片  
    };
},
computed: {
    bacImage() {
       return {
          backgroundImage: "url(" + this.bacImageUrl + ")",
       };
    },
 },
 methods:{
    getModelsInfo(){
       //此处省略调取接口数据直接进行判断
       switch (res.data.robotType) {
          case "T1":
            this.bacImageUrl = require("../assets/images/home/T5.png");
            break;
          case "T2":
            this.bacImageUrl = require("../assets/images/home/T9-C.png");
            break;
          case "T3":
            this.bacImageUrl = require("../assets/images/home/T9-R.png");
            break;
        }
    }
 }