关于修改element-ui中Tabs标签页选中标签下划线缩短居中效果的实现方法

关于修改element-ui中Tabs标签页选中标签下划线缩短居中效果的实现方法

需求描述： 下划线需要改为原来的一半，并且可以根据元素长度动态更换长度。

原样式：
　　
改为以下样式：
　　　

思路如下：element-ui通过一个独立的元素实现tab间切换能够达到下划线滑动的动态效果，所以将下划线独立为一个元素，并非使用tab自身的盒子设置下边框的样式去实现，无法在自身盒子中实现目标样式。于是想到了控制颜色的方法实现效果，通过改变下划线的颜色为渐变色，左右两边颜色透明，中间段颜色为蓝色，渐变位置取百分比，如此便能实现目标效果。

代码如下：（在可以影响样式的情况下添加如下css样式代码）文章来源地址https://uudwc.com/A/5dpaA

.el-tabs__active-bar {
    background-color: transparent !important;
    background-image: linear-gradient(
    	90deg, transparent 0, transparent 27%,
    	#4d72f6 0, #4d72f6 73%,
    	transparent 0, transparent
    );
}