ProAdvanced/components/LEDFont/LEDFont.vue

<template>
	<view>
		<view class="uni__number" 
		:style="{ color: color, 
		'font-size': size+'px' ,
		'height': height+'px',
		'line-height': height+'px'}"> {{currentValue}}</view>
	</view>
</template>

<script>
	export default {
		name: "LEDFont",
		props: {
			height: {
				type: Number,
				value: '28'
			},
			size: {
				type: Number,
				value: '24'
			},
			color: {
				type: String,
				default: '#000000'
			},
			showValue: {
				type: [Number,String],
				default: 0
			}
		},
		watch: {
			showValue(val) {
				// console.log('showValue:',val);
				this.currentValue = val;
				this.$forceUpdate()
			},
		},
		created: function(e) {
			this.currentValue = this.showValue;
		},
		data() {
			return {
				currentValut:0
			};
		}
	}
</script>

<style scoped>
	@font-face {
		font-family: 'UnidreamLED';
		src: url('~@/static/font/UnidreamLED.ttf');
	}

	.uni__number {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
		height: 56rpx;
		line-height: 56rpx;
		margin: 5rpx;
		text-align: center;
		font-size: 23px;
		font-family: UnidreamLED;
		border-radius: 3px;
		/* border: 1rpx solid #000000; */
	}
</style>