【前端开发】图例宽度根据数值自适应

@前端开发

先看结果图

图例的宽度会随数值的改变而变化。

HTML部分

<!-- 数值部分 -->
<ul class="tuli" ref="num">
	<li
		style="
			margin-top: 5px;
			padding: 0 5px;
			text-align: center;
		"
		v-for="item of itemArr"
		:key="item.val"
	>
		{{ item.val }}
	</li>
</ul>

通过 v-for 对 itemArr 进行遍历生成 li 标签，每个数值左右各留了 5px 的内边距，整体与色块之间有 5px 的上外边距。

CSS部分

.tuli {
	display: flex;
	width: 100%;
	li {
		height: 11px;
		line-height: 14px;
		font-size: 14px;
		color: #333;
	}
}

JavaScipt部分

// 接收图例数据
this.$bus.$on("changeLegend", (val) => {
	// 清除上一次的width，这一步一定不能少
	let lis = [...this.$refs.num.children];
	lis.forEach((li) => {
		li.style.width = "";
	});
	// 赋值
	this.itemArr = val;
	// 渲染后
	this.$nextTick(() => {
		// 获取图例数值span的最大宽度
		let lis = [...this.$refs.num.children];
		let maxW = this.$refs.num.children[0].offsetWidth;
		lis.forEach((li) => {
			if (maxW < li.offsetWidth) {
				maxW = li.offsetWidth;
			}
		});
		this.width = maxW;
		// 将每个span的宽度都改成maxW
		lis.forEach((li) => {
			li.style.width = maxW + "px";
		});
	});
});