专做中医教学网站企点客服

需求：

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

效果：

前面大，后面小

代码：

组件：

<!--修改小数点前后数字不同颜色和大小的组件-->
<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'},// 整数部分字体大小，默认 24pxintegerFontSize: {type: String,default: '24px'},// 小数部分字体颜色，默认黑色decimalColor: {type: String,default: '#000000'},// 小数部分字体大小，默认 16pxdecimalFontSize: {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"/>