vue-devui icon indicating copy to clipboard operation
vue-devui copied to clipboard

Published 20 hours ago • verified publisher icon DevCloudFE

🐛 [Bug]: Tabs溢出不截断

Open GaoNeng-wWw opened this issue 2 years ago • 4 comments

Version

latest

Vue Version

latest

Link to minimal reproduction

https://vue-devui.github.io/components/tabs/#%E6%B7%BB%E5%8A%A0-%E5%88%A0%E9%99%A4

Step to reproduce

  1. 打开官网
  2. 打开Tabs组件
  3. 在添加/删除节不断添加
  4. 会发现溢出不截断错误

What is expected

超出容器宽度时应当截断或显示省略号，例如React Tabs

What is actually happening

没有添加overflow hidden或其他相应样式

Any additional comments (optional)

No response

GaoNeng-wWw avatar Jul 15 '22 06:07 GaoNeng-wWw

确实有问题

kagol avatar Jul 15 '22 10:07 kagol

@kagol 如果改成超出滚动的话会不会效果更好✌️ image

xzxldl55 avatar Jul 19 '22 07:07 xzxldl55

@kagol 如果改成超出滚动的话会不会效果更好✌️ image

滑块和轨道或许最好小一些，因为Tab通常用于顶部，如果轨道太粗就容易显得有些头重脚轻😉

GaoNeng-wWw avatar Jul 21 '22 05:07 GaoNeng-wWw

image image 可以参考antv、element-plus的做法

jxhhdx avatar Jul 28 '22 01:07 jxhhdx

Fixed by @handsomezyw on #1301

kagol avatar Sep 06 '22 15:09 kagol

image image

可以参考antv、element-plus的做法

先确保不会溢出，后续可以优化成可以前进后退这种交互形态

kagol avatar Sep 06 '22 15:09 kagol