vue 如何处理列表中展示进度的问题

 

 

<template>
  <div ref="columnarStrip" class="columnarStrip">
    <div v-if="normal()" class="columnBox">
      <div :style="{ width: widthPercent }" class="content">
        {{ val }}
      </div>
    </div>
    <div v-else class="columnBox">
      <div :style="{ width: widthPercent }" class="content"></div>
      <span class="text"> {{ val }}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'columnarStrip',
  props: {
    max: String,
    val: String
  },
  data() {
    return {
      maxLen: null,
      columnLen: null,
      textLen: null
    }
  },
  computed: {
    widthPercent() {
      return (this.val / this.max) * 100 + '%'
    }
  },
  mounted() {
    this.maxLen = this.$refs.columnarStrip.offsetWidth
  },
  methods: {
    normal() {
      const widthScale = Number(this.widthPercent.replace('%', '')) / 100
      this.columnLen = this.maxLen * widthScale
      this.textLen = this.getTextLen(this.val)
      return this.columnLen > this.textLen
    },
    getTextLen(text) {
      const lenMap = {
        num: 8.3,
        point: 3.4
      }
      const totalNum = text.length
      const reg = /[.]/g
      const pointNum = text.search(reg) === -1 ? 0 : 1
      const textNum = totalNum - pointNum
      return pointNum * lenMap.point + textNum * lenMap.num
    }
  }
}
</script>

<style lang="scss" scoped>
.columnarStrip {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;

}
.columnBox {
  @extend .columnarStrip;
  .content {
    height: 21px;
    line-height: 21px;
    text-align: center;
    background: #3168ec;
    color: white;
  }
  .text{
    margin-left: 5px;
  }
}
</style>

 

__EOF__

本文作者：wjs0509
本文链接：https://www.cnblogs.com/wjs0509/p/17030310.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！