简易封装KPI指标栏

懒汉是一点代码都不想写~

<Card :all-data="allData1" unit="" title="标题1" />

 data() {
    return {
      allData1: [
        { title: "指标1", value: '0', unit: '单位1' },
        { title: "指标2", value: '0', unit: '单位2' },
        { title: "指标3", value: '0', unit: '%' }
      ],
    }
 }

<!-- 标题卡-->
<template>
  <div class="mainZon">
    <!-- 标题 -->
    <div style="font-size: 16px;margin-left:6px;">{{ title }}</div>
    <!-- 不固定的数据 -->
    <div class="cardClass">
      <!-- :class="[allData.length === 2 ? 'itemClass' : 'item1Class']" -->
      <div v-for="(item, index) in allData" :key="index" :class="{ 'twoClass': isTwo, 'threeClass': isThree, 'fourClass': isFour }">
        <div class="titleClass11">{{ item.title }}</div>
        <div class="valueClass" :title="item.value + '' + item.unit ">{{ item.value }}<span style="font-size: 14px;">{{ item.unit }}</span></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Card',
  props: {
    title: {
      type: String,
      default: ''
    },
    unit: {
      type: String,
      default: ''
    },
    allData: {
      type: Array,
      default: () => null
    }
  },
  data() {
    return {
      isTwo: false,
      isThree: false,
      isFour: false
    }
  },
  watch: {
    allData: {
      handler(val) {
        if (val.length === 2) {
          this.isTwo = true
          this.isThree = false
          this.isFour = false
        } else if (val.length === 3) {
          this.isTwo = false
          this.isThree = true
          this.isFour = false
        } else if (val.length === 4) {
          this.isTwo = false
          this.isThree = false
          this.isFour = true
        }
      },
      deep: true,
      immediate: true
    }
  }
}
</script>

<style scoped lang="scss">
.cardClass {
  display: flex;
  height: 70px;
  margin-top: 10px;
}
.mainZon:not(:nth-child(1)){
  margin-left: 6px
}
.twoClass {
  padding: 10px 0 10px 0;
  width: 94px;
  padding-left: 10px;
  border: 1px solid #d7d7d7;
}
.twoClass:nth-child(1) {
  margin-left: 5px;
  border-right: none;
}
.twoClass:nth-child(2) {
  border-left: none;
}
.twoClass:nth-child(3) {
  border-left: none;
}
.threeClass {
  padding: 10px 0 10px 0;
  width: 94px;
  padding-left: 10px;
  border: 1px solid #d7d7d7;
}
.threeClass:nth-child(1) {
  margin-left: 5px;
  border-right: none;
}
.threeClass:nth-child(2) {
  border-left: none;
  border-right: none;
}
.threeClass:nth-child(3) {
  border-left: none;
}
.fourClass {
  padding: 10px 0 10px 0;
  width: 105px;
  padding-left: 10px;
  border: 1px solid #d7d7d7;
}
.fourClass:nth-child(1) {
  margin-left: 5px;
  border-right: none;
}
.fourClass:nth-child(2) {
  border-left: none;
  border-right: none;
}
.fourClass:nth-child(3) {
  border-left: none;
  border-right: none;
}
.fourClass:nth-child(4) {
  border-left: none;
}
.titleClass11 {
  color: #909399;
  font-size: 14px;
}
.valueClass {
  color: #303313;
  font-size: 18px;
  font-weight: 500;
  padding-top: 10px;
  white-space: nowrap; /* 保持文本在一行内显示 */
  overflow: hidden; /* 超出容器部分隐藏 */
  text-overflow: ellipsis; /* 使用省略号替代超出部分的文本 */
}
</style>