缩短饿了么tabs 组件线条宽度

前言

css 样式很多，相互之间配合起来其实能完成很不错的效果，也能减少很多JavaScript 代码。因为对样式理解少从而造成的 JavsScript 脚本 增多是得不偿失的。

案例场景

之前我们UI 设计过一个 tab 切换的效果，主体样式和 vue 组件库 iview，elementui 的 tabs 组件差不多，其中有些许样式不一样。

类似效果图如下：

tab 平铺满， 但是下方的动态过渡蓝色线条要短一点。就这么简单的一个需求，还是有人说做不到， elementUI 有提供 stretch 属性 可以自动撑开，iview 没有但是可以自己通过设置整体宽度更改。但是下方的线条确是这样的。

就是把蓝色线条变短。如果你只想到通过样式更改 width 的值，那么你就只能做到固定宽度情况下效果达到，当变换宽度后（不同屏幕适应时）线条位置偏移。
放一张更改了宽度的效果图就知道了

是不是到这种程度你就要说，这个样式实现不了，要么只能不用下面线条过渡这个样式了，或者自己写一份，不用这个tabs 组件/插件 了。

解决方案

如果上面就是你真实的想法，那么你样式上的学习还不够，就上面这种效果，至少有三种方案能做到，并且能自动适应不同宽度。

1、通过 background-clip + padding + box-sizing
只需要在原有的基础上，加上这三个样式就能实现，设置左右 padding 值，然后 background-clip 设置 content-box 让背景色只能在 padding 以内的区域显示，并且 设置 box-sizing: border-box 让 设置了padding 的蓝色线条不改变宽度。

.el-tabs__active-bar.is-top {
	padding: 0 20px;
	box-sizing: border-box;
	background-clip: content-box;
}

2、通过 background
重置 背景色，再加上渐变色

.el-tabs__active-bar.is-top {
	background: red linear-gradient(90deg, transparent 20px, blue 20px, blue calc(100% - 20px), transparent calc(100% - 20px));
}

上面 只需把红色背景换成 transparent 就行，这里是为了演示差异

背景也可以用 background-size + background-repeat + background-position 的方式，可以自行尝试。

3、通过 伪元素 ::after，::before

.el-tabs__active-bar.is-top {
	background-color: transparent;
}
.el-tabs__active-bar.is-top::before {
    content: '';
    display: block;
    background: red;
    height: 2px;
    width: 90px;
    margin: auto;
}

效果图如下

最后

这么多方式都能达到你觉得做不到的效果，以上只是用elementUI 的 tabs 组件做的例子，其他插件只需要用同样的方法去做，也能达到效果，很多时候，多多考虑样式之间的配搭，能极大提高你代码的稳定与码代码的效率。

好了，上面分享就这么多，希望能帮到你哦