0 环境
1 参考文档
2 分析样式
看下图：
当选中某个标签时，它的图标、标题以及关闭图标，下划线都是青色，其实标签都会变为灰色。
当鼠标悬停在灰色的标签上时，会有个动画显示出来一个关闭的图标，然后移开标签后，动画隐藏关闭图标。还有这里的首页是没有关闭图标。
3 正文
我主要分析的代码是在src/layouts/components/Tabs/index.scss这个位置，而辅助代码的位置是src/layouts/components/Tabs/index.vue。之后我就简称css和vue了。
首先先看看毛坯下是什么样子的。
看下图：
css主要是设置背景色，其它都是tabs-menu的样式。
找到vue，查找这里的tabs-box，如下图，它是最外层的div，这里就是设置整行tab组件的背景色。
再往下看vue里tabs-menu，它也是分两块的。
在看css，tabs-menu它设置了相对定位+宽度100%，先改的下拉菜单样式，后是tab样式。
先分析下拉菜单，最右侧向下的箭头那个。对应就是MoreButton.vue，它对应的位置src/layouts/components/Tabs/components/MoreButton.vue。
1 .el-dropdown
绝对定位，上下居中，然后right为0，但是你会发现图标是紧贴在上面的。
也就说我们要改这个。水平垂直居中，图标需要宽度，不然会很丑，手型鼠标，左边加个边框线，css加个过渡效果属性，鼠标悬在上面时，改变背景色。最后设置图标的大小。
2 :deep(.el-tabs)
这是未修改前的样式。
先看它的结构。
先看下面，它的作用，限制高度使其变的美观，不要有边距，左右填充10px，这里还不清楚它的目的，往下看。
设置绝对定位，不然固定宽度，之后会跑的。
保险起见加个flex布局，去边框。
每个标签水平垂直居中，设置颜色，以及不要有边框线。
.tabs-icon是标签里的图标。它是用来调整上边距和右边标题的边距。
微调标签里叉号的位置。
选中的标签，设置颜色，设置下边框。
4 小结
这里作者主要是考虑动态增减标签页的问题。
