lixin-web/webapp/js/mixins/lottoBalTip.js

vue and bootstrap

import {round} from 'lodash'
import {mapGetters,mapMutations} from 'vuex'

export default {
  data(){
    return {
      showSuffix: true,
      omitted: false,
      omit: false
    }
  },
  methods:{
    textOverflow(slice = 9){
      const self = this
      return {
        formattingFn(value){
          let str = value.toString()
          const rgx = /(\d+)(\d{3})/
          while (rgx.test(str)) {
            str = str.replace(rgx, '$1' + ',' + '$2');

          }
          if (self.lottoBalTip) {
            self.omitted = true
            //slice 7 avoid 154,000.5
            return str.slice(0, self.lottoBal > 1e6 ? slice : 7)
          }
          return str
        }
      }
    },
    countEnd(val){
      this.showSuffix = this.omit = true
      this.lottoBalCountEnd(val)
    },
    ...mapMutations([
      'lottoBalCountEnd'
    ])
  },
  computed:{
    duration(){
      return Math.min(3.5,Math.max(1,round(this.lottoBal/(1e4 * 7.5))))
    },
    lottoBalTip(){
      return this.lottoBal > 1e8 || this.lottoBal.toString().length >= 10
    },
    ...mapGetters([
      'lottoBal',
      'lottoBalCounted',
    ])
  }
}