ruoyi-vue-pro/yudao-ui-app/components/yd-text-price/yd-text-price.vue

<template>
  <view>
    <text v-for="(item, index) in textArray" :key="index" :style="{ fontSize: (index === 1 ? integerSize : size) + 'px', color, textDecoration }">
      {{ item }}
    </text>
  </view>
</template>

<script>
/**
 * 此组件简单的显示（驼峰式）的价格
 */
export default {
  name: 'yd-text-price',
  components: {},
  props: {
    //货币符号
    symbol: {
      type: String,
      default: '￥'
    },
    price: {
      type: [String, Number],
      default: ''
    },
    color: {
      type: String,
      default: '#333333'
    },
    //字体大小
    size: {
      type: [String, Number],
      default: 15
    },
    //整形部分字体大小可单独定义
    intSize: {
      type: [String, Number],
      default: ''
    },
    //文字装饰，下划线，中划线等
    decoration: {
      type: String,
      default: 'none'
    }
  },
  data() {
    return {
      textDecoration: this.decoration
    }
  },
  computed: {
    textArray() {
      let array = []
      if (this.price === '' || this.price === undefined) {
        return []
      }
      array.push(this.symbol)
      if (!/^\d+(\.\d+)?$/.test(this.price)) {
        console.error('组件<yd-text-price :text="???" 此处参数应为金额数字')
      } else {
        let arr = parseFloat(this.price).toFixed(2).split('.')
        array.push(arr[0])
        array.push('.' + arr[1])
      }
      return array
    },
    integerSize() {
      return this.intSize ? this.intSize : this.size
    }
  }
}
</script>
<style scoped></style>