soybeanjs / soybean-admin

A clean, elegant, beautiful and powerful admin template, based on Vue3, Vite5, TypeScript, Pinia, NaiveUI and UnoCSS. 一个清新优雅、高颜值且功能强大的后台管理模板,基于最新的前端技术栈,包括 Vue3, Vite5, TypeScript, Pinia, NaiveUI 和 UnoCSS。

Home Page:https://soybeanjs.cn

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

[Bug]: 打开新的tab展示不全

checkZH opened this issue · comments

软件版本

1.1.0

运行环境

Windows (64)

运行架构

None

重现步骤

当有tab栏已经有很多tab时,此时打开一个新的tab,例如该tab在路由中定义的内容为 ABCDEFG,但是在页面使用tabStore.setTabLabel 修改了Tab的label 且长度大于之前的内容,则会导致显示不全

image

期望的结果是什么?

image

实际的结果是什么?

image

日志记录(可选)

No response

补充说明(可选)

该问题已在版本v1.0.1中修复过 cc53997,请更新版本

这个解决的是过长中间出现空白的问题,实际上当修改label长度时会出现我上面展示的情况,因为打开tab使用的是默认的label,但是修改label是在打开tab之后,修改之后会导致实际渲染的Tab宽度比修改之前宽,这样就会有一部分被隐藏,我目前的处理办法是监听label发生变化再执行一次scrollToActiveTab,不知道是否有更佳实现方式

watch(
  () => tabStore.activeChange,
  () => {
    scrollToActiveTab();
  }
);