'admin-21.12.30:新增tagsview风格5'

This commit is contained in:
lyt 2021-12-30 20:24:35 +08:00
parent 98e75351b8
commit 920c705421
3 changed files with 40 additions and 3 deletions

View File

@ -260,6 +260,7 @@
<el-option label="风格2" value="tags-style-two"></el-option>
<el-option label="风格3" value="tags-style-three"></el-option>
<el-option label="风格4" value="tags-style-four"></el-option>
<el-option label="风格5" value="tags-style-five"></el-option>
</el-select>
</div>
</div>

View File

@ -20,7 +20,11 @@
<SvgIcon :name="v.meta.icon" class="layout-navbars-tagsview-ul-li-iconfont" v-if="!isActive(v) && getThemeConfig.isTagsviewIcon" />
<span>{{ $t(v.meta.title) }}</span>
<template v-if="isActive(v)">
<SvgIcon name="elementRefreshRight" class="ml5" @click.stop="refreshCurrentTagsView($route.fullPath)" />
<SvgIcon
name="elementRefreshRight"
class="ml5 layout-navbars-tagsview-ul-li-refresh"
@click.stop="refreshCurrentTagsView($route.fullPath)"
/>
<SvgIcon
name="elementClose"
class="layout-navbars-tagsview-ul-li-icon layout-icon-active"
@ -648,6 +652,38 @@ export default {
color: var(--color-primary) !important;
}
}
// 5
.tags-style-five {
align-items: flex-end;
.tags-style-five-svg {
-webkit-mask-box-image: url("data:image/svg+xml,%3Csvg width='68' height='34' viewBox='0 0 68 34' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m27,0c-7.99582,0 -11.95105,0.00205 -12,12l0,6c0,8.284 -0.48549,16.49691 -8.76949,16.49691l54.37857,-0.11145c-8.284,0 -8.60908,-8.10146 -8.60908,-16.38546l0,-6c0.11145,-12.08445 -4.38441,-12 -12,-12l-13,0z' fill='%23409eff'/%3E%3C/svg%3E")
12 27 15;
}
.layout-navbars-tagsview-ul-li {
padding: 0 5px;
border-width: 15px 27px 15px;
border-style: solid;
border-color: transparent;
margin: 0 -15px;
.layout-icon-active,
.layout-navbars-tagsview-ul-li-iconfont,
.layout-navbars-tagsview-ul-li-refresh {
display: none;
}
.layout-icon-three {
display: block;
}
&:hover {
@extend .tags-style-five-svg;
background: var(--color-primary-light-9);
}
}
.is-active {
@extend .tags-style-five-svg;
background: var(--color-primary) !important;
z-index: 1;
}
}
}
.layout-navbars-tagsview-shadow {
box-shadow: rgb(0 21 41 / 4%) 0px 1px 4px;

View File

@ -110,9 +110,9 @@ const themeConfigModule: Module<ThemeConfigState, RootStateTypes> = {
/**
*
*/
// Tagsview 风格:可选值"<tags-style-one|tags-style-two|tags-style-three|tags-style-four>",默认 tags-style-one
// Tagsview 风格:可选值"<tags-style-one|tags-style-two|tags-style-three|tags-style-four|tags-style-five>",默认 tags-style-five
// 定义的值与 `/src/layout/navBars/tagsView/tagsView.vue` 中的 class 同名
tagsStyle: 'tags-style-one',
tagsStyle: 'tags-style-five',
// 主页面切换动画:可选值"<slide-right|slide-left|opacitys>",默认 slide-right
animation: 'slide-right',
// 分栏高亮风格:可选值"<columns-round|columns-card>",默认 columns-round