shop-app/components/UiMoney.vue

<!--
 * @Author: ch
 * @Date: 2022-04-21 09:54:15
 * @LastEditors: ch
 * @LastEditTime: 2022-04-22 19:43:05
 * @Description: file content
-->
<template>
	<view class="ui-money">
		<text v-if="prefix" class="ui-money--prefix">￥</text>
		<text class="ui-money--price">{{moneyStr}}</text>
		<text v-if="float && suffix" class="ui-money--suffix">.{{moneyArr[1]}}</text>
	</view>
</template>
<script>
export default {
	props : {
		money : {
			type : Number | String,
			default : '0'
		},
		float : {
			type : Boolean,
			default : false
		},
		prefix : {
			type : Boolean,
			default : false
		},
		suffix : {
			type : Boolean,
			default : false
		}
	},
	computed : {
		moneyStr (){
			let priceStr = '',
				intNum = this.moneyArr[0],
				floatNum = this.moneyArr[1];
			// 前缀不需要缩小显示
			if(!this.prefix){
				priceStr = `￥${intNum}`;
			}else{
				priceStr = intNum;
			}
			// 后缀不需要缩小显示
			if(!this.suffix){
				priceStr += floatNum ? `.${floatNum}` : '';
			}
			return priceStr;
		},
		moneyArr (){
			let moneyArr = (this.money || '0').toString().split('.');
			// 如果需要补0 则整数时补00
			if(this.float){
				if(!moneyArr[1]){
					moneyArr[1] = '00';
				}else if(moneyArr[1] < 10){
					moneyArr[1] = `0${moneyArr[1]}`;
				}
			}
			return moneyArr;
		}

	}
}
</script>
<style lang="scss" scoped>
.ui-money{
	// display: flex;
	align-items: center;
	text{
		// display: block;
		line-height: initial;
	}
}
</style>