uniapp——信号值组件(vue3)

组件代码

html 复制代码
<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>

使用代码

引入:

html 复制代码
import Signal from '@/components/signal/signal.vue'

使用:

html 复制代码
<Signal :signal="info.signal" style="margin-right: 10rpx;"></Signal>
相关推荐
疯狂的沙粒21 分钟前
在uni-app中如何从Options API迁移到Composition API?
javascript·vue.js·uni-app
xiaominlaopodaren41 分钟前
Three.js 光影魔法:如何单独点亮你的3D模型
javascript
PasserbyX42 分钟前
一句话解释JS链式调用
前端·javascript
1024小神44 分钟前
tauri项目,如何在rust端读取电脑环境变量
前端·javascript
古夕1 小时前
如何将异步操作封装为Promise
前端·javascript
@一枝梅1 小时前
vue3 vite.config.js 引入bem.scss文件报错
javascript·rust·vue·scss
古夕1 小时前
JS 模块化
前端·javascript
一只小风华~1 小时前
HTML前端开发:JavaScript 常用事件详解
前端·javascript·html
Revol_C1 小时前
【调试日志】我只是用wangeditor上传图片而已,页面咋就崩溃了呢~
前端·vue.js·程序员
HelloWord~2 小时前
SpringSecurity+vue通用权限系统2
java·vue.js