uniapp 小数点价格样式效果

使用实例

<price price="10.11"></price>

组件代码

<template>
	<div class="price">
		<div class="unit">¥</div>
		<div class="price">{{integer}}</div>
		<div class="Point">{{decimal}}</div>
	</div>
</template>

<script>
	import _ from 'lodash'
	export default {
		data() {
			return {
				show: false
			}
		},
		props: {
			price: {
				type: String,
				default () {
					return '10.11'
				}
			}
		},
		computed: {
			integer: function() {
				var price = 0
				if (String(this.price).includes('.')) {
					price = _.split(this.price, '.', 2)[0];
				} else {
					price = this.price
				}
				return price
			},
			decimal: function() {
				var price = 0
				if (String(this.price).includes('.')) {
					price = '.' + _.split(String(this.price), '.', 2)[1];
				} else {
					price = ''
				}
				return price
			},
		},
		methods: {
			chooseImage() {

			},
		}
	}
</script>
<style scoped lang="scss">
	.price {
		display: flex;
		justify-content: flex-start;
		align-items: flex-end;
		flex-wrap: nowrap;
		flex-direction: row;
		align-content: flex-start;
		.unit {
			font-family: PingFangSC-Medium;
			font-size: 24rpx;
			color: #EF4034;
			text-align: center;
			font-weight: 500;
			line-height: 20rpx;
		}

		.price {
			font-family: PingFangSC-Medium;
			font-size: 36rpx;
			color: #EF4034;
			font-weight: 500;
			line-height: 30rpx;
		}

		.Point {
			font-family: PingFangSC-Medium;
			font-size: 24rpx;
			color: #EF4034;
			font-weight: 500;
			line-height: 20rpx;
		}
	}
</style>

标签：uniapp,return,String,flex,样式,price,小数点,font,size
来源： https://www.cnblogs.com/wanjunshijie/p/16496476.html