翻牌器单独设置前后缀样式
<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>
)
)
