需求:
修改带小数点的价格数字:小数点的前后数字,要分别显示成不同颜色和大小!已经封装成组件了!
效果:
前面大,后面小
代码:
组件:
<!--修改小数点前后数字不同颜色和大小的组件-->
<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"
/>