TAB标签美化 - SVG作为mask

今天觉得V3的标签不是很好看，忽然想起来之前看过Vue Admin Beautiful Pro的样式挺好的，顺手研究了一把。发现Vue Admin Beautiful是采用PNG+mask css来解决的。于是乎打算把V3的标签页做点小美化，但是迁移过程发生些小插曲，在此记录一下。

1）像素化变形问题

VABPro采用的是PNG作为背景，这个图片

之前没用过mask的css，看了下mask说明，是将黑色的部分作为混合颜色的保留部位，透明作为穿透部分。而为了保证铺满TAB的背景，使用了mask-size这个属性进行了拉伸。

由于PNG本身不是矢量，拉伸后出现了变形，边界模糊的问题，效果不好（忘截图片了）。于是想起来用SVG来做背景，打开AI描摹再修改了下，得到了SVG。

2）SVG无法拉伸的问题

仿照VABPro的方式，将SVG编码为BASE64，发现能够显示，但是无法拉伸变形。本以为该问题无解，找遍google快放弃的时候，忽然有人提到了在svg添加preserveAspectRatio="none"放弃比例限制。试了下，还真可以，于是乎得到了这个SVG数据：

<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 191 34"><path d="M0,34c7.37-2,9-4,9-11.36,0-4.15-.06-8.3,0-12.45C9,5.64,13.49,0,21,0H170c7.45,0,12.13,5.77,12.06,10.59-.06,3.82-.07,7.66-.06,11.49,0,8,1.24,9.65,9,11.92"/></svg>

BASE64编码后，真的能够拉伸了，这下比PNG看起来舒服多了，顺便把VAB的比例重新调了一下。

3）改编v3-admin-vite的tab头部，修改下TagsView/index.vue里的样式部分：

<style lang="scss" scoped>
.tags-view-container {height: var(--v3-tagsview-height);width: 100%;background-color: var(--v3-header-bg-color);box-shadow: 0 0 3px 0 #00000010;.tags-view-wrapper {.tags-view-item {display: inline-block;position: relative;cursor: pointer;height: 26px;line-height: 26px;//border: 1px solid var(--v3-tagsview-tag-border-color);//border-radius: var(--v3-tagsview-tag-border-radius);color: var(--v3-tagsview-tag-text-color);background-color: var(--v3-tagsview-tag-bg-color);padding: 0 20px; // Edit by Jimfont-size: 12px;// margin-left: 5px;// margin-top: 4px;&:first-of-type {margin-left: 5px;}&:last-of-type {margin-right: 5px;}height: 34px;line-height: 34px;&.active {background-color: var(--v3-tagsview-tag-active-bg-color);color: var(--v3-tagsview-tag-active-text-color);// ---- add by Jim ----mask: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiIHZpZXdCb3g9IjAgMCAxOTEgMzQiPjxwYXRoIGQ9Ik0wLDM0YzcuMzctMiw5LTQsOS0xMS4zNiwwLTQuMTUtLjA2LTguMywwLTEyLjQ1QzksNS42NCwxMy40OSwwLDIxLDBIMTcwYzcuNDUsMCwxMi4xMyw1Ljc3LDEyLjA2LDEwLjU5LS4wNiwzLjgyLS4wNyw3LjY2LS4wNiwxMS40OSwwLDgsMS4yNCw5LjY1LDksMTEuOTIiLz48L3N2Zz4=);-webkit-mask: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiIHZpZXdCb3g9IjAgMCAxOTEgMzQiPjxwYXRoIGQ9Ik0wLDM0YzcuMzctMiw5LTQsOS0xMS4zNiwwLTQuMTUtLjA2LTguMywwLTEyLjQ1QzksNS42NCwxMy40OSwwLDIxLDBIMTcwYzcuNDUsMCwxMi4xMyw1Ljc3LDEyLjA2LDEwLjU5LS4wNiwzLjgyLS4wNyw3LjY2LS4wNiwxMS40OSwwLDgsMS4yNCw5LjY1LDksMTEuOTIiLz48L3N2Zz4=);mask-size: 100% 100%;-webkit-mask-size: 100% 100%;z-index: 1;&::before {content: '';background-color: var(--v3-tagsview-tag-active-before-color);display: inline-block;width: 8px;height: 8px;border-radius: 50%;position: relative;margin-right: 5px; // Modified by Jim}}&:not(.active) {// add by Jimbackground-color: var(--el-menu-border-color) !important;border-top-left-radius: 3px;border-top-right-radius: 3px;border-left: none;border-right: none;margin: 0 -10px;opacity: 0.95;}.el-icon {margin: 0 2px;vertical-align: middle;border-radius: 50%;&:hover {background-color: var(--v3-tagsview-tag-icon-hover-bg-color);color: var(--v3-tagsview-tag-icon-hover-color);}}}}.contextmenu {margin: 0;background-color: #fff;z-index: 3000;position: absolute;list-style-type: none;padding: 5px 0;border-radius: 4px;font-size: 12px;font-weight: 400;color: #333;box-shadow: 2px 2px 3px 0 #00000030;li {margin: 0;padding: 7px 16px;cursor: pointer;&:hover {background-color: #eee;}}}
}
</style>

看了下，效果不错。在Chrome、Firefox、Edge下能很好兼容，IE11就免了，连登录都进不去：

在默认主题下工作良好