今天觉得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 Jim
font-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 Jim
background-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就免了，连登录都进不去：
在默认主题下工作良好
黑色可能要稍微调整一下
在深蓝主题下，由于默认背景色半透明，问题稍多一点
