mall-web-ssr/components/main/count/Item.vue

<template>
  <div class="count-item">
    <span class="title">{{ title }}</span>
    <span v-for="num in nums" :class="num == ',' ? 'separator' : 'num'">{{ num }}</span>
  </div>
</template>
<script>
  export default {
    name: 'count-item',
    props: {
      value: {
        default: 0,
        type: Number
      },
      title: {
        type: String
      }
    },
    methods: {
      formatNumber (num) {
        let re = /(\d+)(\d{3})/
        num = (Array(10 - String(num).length).join(0) + num)
        while (re.test(num)) {
          num = num.replace(re, '$1,$2')
        }
        return num.split('')
      }
    },
    computed: {
      nums () {
        return this.formatNumber(this.value)
      }
    }
  }
</script>
<style lang="scss" scoped>
  @import '~assets/scss/variables';

  .count-item {
    text-align: center;
    line-height: 20px;

    .title {
      display: inline-block;
      width: 60px;
      float: left;
      font-weight: bold;
    }
    .separator, .num {
      display: inline-block;
    }
    .separator {
      font-size: 12px;
      color: $primary;
      margin: 0 5px 0 -2px;
    }
    .num {
      background: $primary;
      width: 15px;
      height: 20px;
      margin-right: 10px;
      text-align: center;
      color: $white;
      font-weight: bold;
    }
  }
</style>