关于修改element-ui中Tabs标签页选中标签下划线缩短居中效果的实现方法
需求描述： 下划线需要改为原来的一半，并且可以根据元素长度动态更换长度。
原样式：
改为以下样式：
思路如下：element-ui通过一个独立的元素实现tab间切换能够达到下划线滑动的动态效果，所以将下划线独立为一个元素，并非使用tab自身的盒子设置下边框的样式去实现，无法在自身盒子中实现目标样式。于是想到了控制颜色的方法实现效果，通过改变下划线的颜色为渐变色，左右两边颜色透明，中间段颜色为蓝色，渐变位置取百分比，如此便能实现目标效果。文章来源：https://www.toymoban.com/news/detail-650799.html
代码如下：（在可以影响样式的情况下添加如下css样式代码）文章来源地址https://www.toymoban.com/news/detail-650799.html
.el-tabs__active-bar {
background-color: transparent !important;
background-image: linear-gradient(
90deg, transparent 0, transparent 27%,
#4d72f6 0, #4d72f6 73%,
transparent 0, transparent
);
}
到了这里，关于关于修改element-ui中Tabs标签页选中标签下划线缩短居中效果的实现方法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
