uniapp——信号值组件（vue3）

组件代码

<template>
	<view>
		<view class="signals">
			<view v-for="(item, index) in signals" :key="index" class="signal" :style="item"></view>
		</view>
	</view>
</template>

<script setup>
	/**
	 * 信号格组件
	 * @description 信号格组件
	 * @property {Number}			signal			当前信号值
	 * @property {Number|String}	columnWidth		柱宽度
	 * @property {Number}			maxSignal		最大信号值
	 * @property {Number}			bisection		信号等分
	 * @property {String}			lowColor		信号低颜色
	 * @property {String}			midColor		信号中颜色
	 * @property {String}			highColor		信号高颜色
	 * @property {String}			nothingColor	信号空颜色
	 * @example <signal :signal="31"></signal>
	 */
	import {
		ref,
		watch,
		defineProps
	} from 'vue'

	const props = defineProps({
		signal: {
			type: Number,
			default: 31,
		},
		columnWidth: {
			type: [Number, String],
			default: 2,
		},
		maxSignal: {
			type: Number,
			default: 31,
		},
		bisection: {
			type: Number,
			default: 4,
		},
		lowColor: {
			type: String,
			default: '#13AD11',
		},
		midColor: {
			type: String,
			default: '#13AD11',
		},
		highColor: {
			type: String,
			default: '#13AD11',
		},
		nothingColor: {
			type: String,
			default: '#c8c9cc',
		}
	})

	const initHeight = ref(1)
	const signals = ref([])

	const doChanges = () => {
		const x = props.maxSignal / props.bisection
		let min = 0
		let max = x
		const list = []

		for (let i = 0; i < props.bisection; i++) {
			let color
			if (i === 0) {
				color = props.lowColor
			} else if (i > 0 && i < props.bisection - 1) {
				color = props.midColor
			} else if (i === props.bisection - 1) {
				color = props.highColor
			}
			list.push({
				min: Math.floor(min),
				max: Math.floor(max),
				color: color
			})
			min = max
			max += x
		}

		let color
		if (props.signal >= props.maxSignal) {
			color = props.highColor
		} else if (props.signal === 0) {
			color = props.nothingColor
		} else {
			list.forEach((items) => {
				if (props.signal >= items.min && props.signal < items.max) {
					color = items.color
				}
			})
		}

		list.forEach((items) => {
			if (props.signal >= items.min) {
				items.color = color
			} else {
				items.color = props.nothingColor
			}
		})

		signals.value = list.map((items) => ({
			width: `${props.columnWidth}px`,
			height: `${initHeight.value += 1}px`,
			backgroundColor: items.color
		}))
	}

	watch(() => [props.signal, props.columnWidth, props.maxSignal, props.bisection, props.lowColor, props.midColor, props
		.highColor, props.nothingColor
	], doChanges, {
		deep: true,
		immediate: true
	})

	doChanges()
</script>

<style lang="scss">
	.signals {
		display: flex;
		align-items: baseline;

		.signal {
			border-radius: 50rpx;
			margin: 0 1px;
		}
	}
</style>

使用代码

引入：

import Signal from '@/components/signal/signal.vue'

使用：

<Signal :signal="info.signal" style="margin-right: 10rpx;"></Signal>