vue3修改带小数点的价格数字：小数点的前后数字，要分别显示成不同颜色和大小！已经封装成组件了！

需求：

修改带小数点的价格数字：小数点的前后数字，要分别显示成不同颜色和大小！已经封装成组件了！

效果：

前面大，后面小

代码：

组件：

<!--修改小数点前后数字不同颜色和大小的组件-->
<template>
  <view class="price-container">
    <text class="current-price">
     <text class="price-icon"> ¥</text>
      <!-- 显示小数点前的价格部分，应用传入的颜色和字体大小 -->
      <text :style="{ color: integerColor, fontSize: integerFontSize }" class="price-integer">
        {{ integerPart }}
      </text>
      <text class="dot">.</text>
      <!-- 显示小数点后的价格部分，应用传入的颜色和字体大小 -->
      <text :style="{ color: decimalColor, fontSize: decimalFontSize }" class="price-decimal">
        {{ decimalPart }}
      </text>
    </text>
  </view>
</template>

<script setup>
// 导入所需的 Vue API
import { computed, defineProps } from 'vue';

// 定义组件的 props
const props = defineProps({
  // 价格值，必填项
  price: {
    type: Number,
    required: true
  },
  // 整数部分字体颜色，默认黑色
  integerColor: {
    type: String,
    default: '#000000'
  },
  // 整数部分字体大小，默认 24px
  integerFontSize: {
    type: String,
    default: '24px'
  },
  // 小数部分字体颜色，默认黑色
  decimalColor: {
    type: String,
    default: '#000000'
  },
  // 小数部分字体大小，默认 16px
  decimalFontSize: {
    type: String,
    default: '16px'
  }
});

// 确保 price 是一个有效的数字
const numericPrice = computed(() => {
  return Number(props.price) || 0;
});

// 计算价格的整数部分
const integerPart = computed(() => {
  const priceStr = numericPrice.value.toFixed(2); // 保证小数点后有两位
  return priceStr.split('.')[0]; // 获取小数点前的部分
});

// 计算价格的小数部分
const decimalPart = computed(() => {
  const priceStr = numericPrice.value.toFixed(2); // 保证小数点后有两位
  return priceStr.split('.')[1]; // 获取小数点后的部分
});

</script>

<style lang="scss" scoped>
/* 定义价格容器的布局 */
.price-container {
  display: flex;
  align-items: baseline; /* 对齐基线，使得不同字体大小的文本对齐 */
}

/* 定义当前价格的样式 */
.current-price {
  display: flex;
  align-items: baseline; /* 对齐基线，使得不同字体大小的文本对齐 */
  .price-icon{
    font-size: 24rpx;
    margin-right: 2rpx;
  }
  .dot{
    color: #333333;
  }
}

/* 前面的整数，默认样式可以在这里定义 */
.price-integer {
  /* 这里可以设置默认样式 */
  color: #333333;

}

//后面的小数点
.price-decimal {
  /* 这里可以设置默认样式 */
  color: #333333;
}
</style>

使用组件：

灰色：

     <PriceDisplay
              :price="item.price"
              integerColor="#333333"
              integerFontSize="36rpx"
              decimalColor="#333333"
              decimalFontSize="24rpx"
              class="priceContainerWrapper"
          />

彩色：

   <PriceDisplay
              :price="123.45"
              integerColor="#FF5733"
              integerFontSize="30px"
              decimalColor="#33CFFF"
              decimalFontSize="18px"
          />