翻牌器单独设置前后缀样式

<template>
  <div :style="[fontStyle,styleBackGroundColor]">
    <!--        <span style="color: #1d1d1d"> {{optionData}}</span>-->
    <!-- 设置前缀样式 -->
    <span class="prefix" :style="prefixStyle" v-if="cellInfo.options.prefix">{{ cellInfo.options.prefix }}</span>
    <count-to :startVal="cellInfo.options.startVal"
              :endVal="Number(optionData)"
              v-if="!loading"
              :decimals="cellInfo.options.decimals"
              :duration="cellInfo.options.duration*1000"/>
    <!-- 设置后缀样式 -->
    <span class="suffix" :style="suffixStyle" v-if="cellInfo.options.suffix">{{ cellInfo.options.suffix }}</span>

  </div>
</template>

<script>
import countTo from "vue-count-to"

//备注：如果翻牌器出现一条横线==》需要配置lineHeight:行高 让它显示在蓝框中
export default {
  name: "ele-count",
  components: {
    countTo
  },
  computed: {
    fontStyle() {
      let style = {
        display: this.cellInfo.options.style.align!=undefined?'':"flex",
        width: this.cellInfo.common.width + 'px',
        height: this.cellInfo.common.height + 'px',
        fontSize: this.cellInfo.options.style.fontSize + 'px',
        color: this.cellInfo.options.style.color,
        fontWeight: this.cellInfo.options.style.thickness,
        fontFamily: this.cellInfo.options.style.fontSheet,
        textAlign: this.cellInfo.options.style.align + ' !important',
        lineHeight: this.cellInfo.options.style.height + 'px',
        letterSpacing: this.cellInfo.options.style.space + 'px'
      }
      return style;
    },
    suffixStyle() {
      let style = {
        fontSize: this.cellInfo.options.style.suffixfontSize==undefined?this.cellInfo.options.style.fontSize + 'px':this.cellInfo.options.style.suffixfontSize + 'px',
        color: this.cellInfo.options.style.suffixcolor,
        marginLeft: this.cellInfo.options.style.suffixmarginLeft + 'px'||'-10px',
        letterSpacing: this.cellInfo.options.style.suffixspace + 'px'||'0px',
      }
      return style;
    },
    prefixStyle() {
      let style = {
        fontSize: this.cellInfo.options.style.prefixfontSize==undefined?this.cellInfo.options.style.fontSize + 'px':this.cellInfo.options.style.prefixfontSize + 'px',
        color: this.cellInfo.options.style.prefixcolor,
        marginRight: this.cellInfo.options.style.prefixmarginRight + 'px',
        letterSpacing: this.cellInfo.options.style.prefixspace + 'px'||'0px',
      }
      return style;
    },
  },
  data() {
    return {
      config: {
      }
    };
  },
  }
  </script>