Ant Design Vue - 去掉 <a-tabs> 标签页组件底部细条灰色线(清掉选项卡组件整体底部灰色黑色细线)

前言

默认情况下,<a-tabs> 组件底部有一条 “贯穿式” 灰色细线,如下图所示:

在这里插入图片描述

解决方案

通过 tabBarStyle 属性,可以轻松去掉,网上大部分文章都采用了直接覆盖样式的方式,这样是不规范的。

在组件上绑定属性,其 borderBottom 属性设置为 unset 即可。

<a-tabs :tabBarStyle="{ borderBottom: 'unset' }">
    ...
</a-tabs>

成功去除:

在这里插入图片描述

写在后面

改变其他样式同样可行,比如字体大小。

猜你喜欢

转载自blog.csdn.net/weixin_44198965/article/details/125618141