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

@前端开发

先看结果图

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

HTML部分

<!-- 数值部分 -->
<ul class="tuli" ref="num"><listyle="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的宽度都改成maxWlis.forEach((li) => {li.style.width = maxW + "px";});});
});