vue百分比组件 - 传进来的数据是百分比才可以

<template>
  <div class="cruiseTaxi">
    <div class="cruiseTaxi-title">{{ title }}</div>
    <div class="cruiseTaxi-con" :style="{borderColor:color}" v-if="isshowHeavyLoad||isshowNoLoad">
      <div class="cruiseTaxi-con_left" :style="{width:heavyLoad,background:color}" v-if="isshowHeavyLoad" @mousemove="handleHeavyLoadEnter($event,heavyLoad)" @mouseout="handleHeavyLoadLeave">数据一</div>
      <div class="cruiseTaxi-con_right" :style="{width:noLoad,color:color}" v-if="isshowNoLoad" @mousemove="handleNoLoadEnter($event,noLoad)" @mouseout="handleNoLoadLeave">数据二</div>
      <div v-if="popisShow" id="pop" :style="{top:offsetY+'px',left:offsetX+'px'}" style="position: absolute;z-index: 1;">{{ val }}</div>
    </div>
    <div v-if="!(isshowHeavyLoad||isshowNoLoad)" class="emptyName">暂无数据</div>
  </div>
</template>

<script>
export default {
  name: "cruiseTaxi",
  props: {
    title: {
      type: String,
      default: "",
    },
    heavyLoad: {
      type: String,
      default: "",
    },
    noLoad: {
      type: String,
      default: "",
    },
    color: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      isshowHeavyLoad: false,
      isshowNoLoad: false,
      val: "123",
      popisShow: false, //鼠标经过的弹窗是否显示
      offsetX: 0,
      offsetY: 0,
    };
  },
  created() {},
  watch: {
    heavyLoad(newVal) {
      let ele = newVal.slice(0, -1);
      if (ele === "null" || ele === "undefined" || ele.length == 0||ele ==0) {
        this.isshowHeavyLoad = false;
      } else {
        this.isshowHeavyLoad = true;
      }
    },
    noLoad(newVal) {
      let ele = newVal.slice(0, -1);
      if (ele === "null" || ele === "undefined" || ele.length == 0||ele==0) {
        this.isshowNoLoad = false;
      } else {
        this.isshowNoLoad = true;
      }
    },
  },
  methods: {
    // 重载鼠标移入
    handleHeavyLoadEnter(e, val) {
      this.popisShow = true;
      this.offsetX = e.layerX + 10;
      this.offsetY = e.layerY + 22;
      this.val = "数据一" + val;
    },
    // 重载鼠标移出
    handleHeavyLoadLeave() {
      this.popisShow = false;
    },
    // 空载鼠标移入
    handleNoLoadEnter(e, val) {
      this.popisShow = true;
      this.offsetX = e.layerX + 10;
      this.offsetY = e.layerY + 22;
      this.val = "数据二" + val;
    },
    // 空载鼠标移出
    handleNoLoadLeave() {
      this.popisShow = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.cruiseTaxi {
  margin-top: 20px;
  .cruiseTaxi-title {
    font-size: 14px;
    font-weight: 700;
  }
  .emptyName {
    margin-top: 10px;
    height: 40px;
    line-height: 40px;
    color: #84888c;
    text-align: center;
    border: 1px solid #dee1e6;
    border-radius: 4px;
  }
  .cruiseTaxi-con {
    height: 40px;
    line-height: 40px;
    margin-top: 10px;
    display: flex;
    border: 1px solid #3886ff;
    border-radius: 4px;
    text-align: center;
    font-size: 12px;
    position: relative;
    #pop {
      padding: 0px 10px;
      background: rgba(0, 0, 0, 0.5);
      border-radius: 6px;
      color: #fff;
      min-width: 80px;
      white-space: nowrap;
    }
    .cruiseTaxi-con_left {
      background: #3886ff;
      border-bottom-right-radius: 4px;
      border-top-right-radius: 4px;
      color: #fff;
      min-width: 4%;
    }
    .cruiseTaxi-con_left:hover {
      cursor: pointer;
    }
    .cruiseTaxi-con_right{
      min-width: 4%;
    }
    .cruiseTaxi-con_right:hover {
      cursor: pointer;
    }
  }
}
</style>

传进来的数据是百分比才可以