abu/wzj-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Pre Merge pull request !98 from Andy/tab

Browse Source
This commit is contained in:
Andy 2024-04-17 09:03:01 +00:00 committed by Gitee
commit d1efbe9b8f
No known key found for this signature in database
GPG Key ID: 173E9B9CA92EEF8F
2 changed files with 92 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -21,6 +21,7 @@ selenium-debug.log
*.local *.local
package-lock.json package-lock.json
pnpm-lock.yaml
yarn.lock yarn.lock
# 编译生成的文件 # 编译生成的文件

135
src/layout/components/TagsView/index.vue
View File

@ -1,30 +1,31 @@
<template> <template>
<div id="tags-view-container" class="tags-view-container"> <div id="tags-view-container" class="tags-view-container">
<scroll-pane ref="scrollPaneRef" class="tags-view-wrapper" @scroll="handleScroll"> <scroll-pane ref="scrollPaneRef" class="tags-view-wrapper" @scroll="handleScroll">
<div class="tabs-wrapper">
<div class="tabs-nav">
<router-link <router-link
v-for="tag in visitedViews" v-for="tag in visitedViews"
:key="tag.path" :key="tag.path"
:data-path="tag.path" :data-path="tag.path"
:class="isActive(tag) ? 'active' : ''" :class="{ active: isActive(tag), affix: isAffix(tag) }"
:to="{ path: tag.path ? tag.path : '', query: tag.query, fullPath: tag.fullPath ? tag.fullPath : '' }" :to="{ path: tag.path ? tag.path : '', query: tag.query, fullPath: tag.fullPath ? tag.fullPath : '' }"
class="tags-view-item" class="tags-view-item"
:style="activeStyle(tag)"
@click.middle="!isAffix(tag) ? closeSelectedTag(tag) : ''" @click.middle="!isAffix(tag) ? closeSelectedTag(tag) : ''"
@contextmenu.prevent="openMenu(tag, $event)" @contextmenu.prevent="openMenu(tag, $event)"
> >
{{ tag.title }} {{ tag.title }}
<span v-if="!isAffix(tag)" @click.prevent.stop="closeSelectedTag(tag)"> <el-icon v-if="!isAffix(tag)" class="close-icon" @click.prevent.stop="closeSelectedTag(tag)"><Close /></el-icon>
<close class="el-icon-close" style="width: 1em; height: 1em;vertical-align: middle;" />
</span>
</router-link> </router-link>
</div>
</div>
</scroll-pane> </scroll-pane>
<ul v-show="visible" :style="{ left: left + 'px', top: top + 'px' }" class="contextmenu"> <ul v-show="visible" :style="{ left: left + 'px', top: top + 'px' }" class="contextmenu">
<li @click="refreshSelectedTag(selectedTag)"><refresh-right style="width: 1em; height: 1em;" /> 刷新页面</li> <li @click="refreshSelectedTag(selectedTag)"><refresh-right class="mr-5px" style="width: 1em; height: 1em;" /> 刷新页面</li>
<li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)"><close style="width: 1em; height: 1em;" /> 关闭当前</li> <li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)"><close class="mr-5px" style="width: 1em; height: 1em;" /> 关闭当前</li>
<li @click="closeOthersTags"><circle-close style="width: 1em; height: 1em;" /> 关闭其他</li> <li @click="closeOthersTags"><circle-close class="mr-5px" style="width: 1em; height: 1em;" /> 关闭其他</li>
<li v-if="!isFirstView()" @click="closeLeftTags"><back style="width: 1em; height: 1em;" /> 关闭左侧</li> <li v-if="!isFirstView()" @click="closeLeftTags"><back class="mr-5px" style="width: 1em; height: 1em;" /> 关闭左侧</li>
<li v-if="!isLastView()" @click="closeRightTags"><right style="width: 1em; height: 1em;" /> 关闭右侧</li> <li v-if="!isLastView()" @click="closeRightTags"><right class="mr-5px" style="width: 1em; height: 1em;" /> 关闭右侧</li>
<li @click="closeAllTags(selectedTag)"><circle-close style="width: 1em; height: 1em;" /> 全部关闭</li> <li @click="closeAllTags(selectedTag)"><circle-close class="mr-5px" style="width: 1em; height: 1em;" /> 全部关闭</li>
</ul> </ul>
</div> </div>
</template> </template>
@ -68,13 +69,6 @@ watch(visible, (value) => {
const isActive = (r: TagView): boolean => { const isActive = (r: TagView): boolean => {
return r.path === route.path; return r.path === route.path;
} }
const activeStyle = (tag: TagView) => {
if (!isActive(tag)) return {};
return {
"background-color": theme.value,
"border-color": theme.value
};
}
const isAffix = (tag: TagView) => { const isAffix = (tag: TagView) => {
return tag.meta && tag.meta.affix; return tag.meta && tag.meta.affix;
} }
@ -238,48 +232,61 @@ onMounted(() => {
<style lang="scss" scoped> <style lang="scss" scoped>
.tags-view-container { .tags-view-container {
height: 34px; --el-tabs-header-height: 40px;
width: 100%; .tabs-wrapper {
background-color: var(--el-bg-color); height: calc(var(--el-tabs-header-height) + 2px);
border: 1px solid var(--el-border-color-light); border-bottom: 1px solid var(--el-border-color-light);
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04); .tabs-nav {
.tags-view-wrapper {
.tags-view-item {
display: inline-block;
position: relative; position: relative;
cursor: pointer; float: left;
height: 26px; display: flex;
line-height: 23px; white-space: nowrap;
background-color: var(--el-bg-color);
border: 1px solid var(--el-border-color-light); border: 1px solid var(--el-border-color-light);
color: #495060; border-radius: 4px 4px 0 0;
padding: 0 8px; transition: transform var(--el-transition-duration);
font-size: 12px; margin-bottom: -1px;
margin-left: 5px; scrollbar-color: var(--el-fill-color-light);
margin-top: 4px; }
&:hover { .tags-view-item {
position: relative;
padding: 0 20px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--el-font-size-base);
font-weight: 500;
color: var(--el-text-color-primary);
white-space: nowrap;
border-bottom: 1px solid transparent;
border-left: 1px solid var(--el-border-color-light);
transition: color var(--el-transition-duration) var(--el-transition-function-ease-in-out-bezier),
padding var(--el-transition-duration) var(--el-transition-function-ease-in-out-bezier);
&:hover,
&.active {
color: var(--el-color-primary); color: var(--el-color-primary);
} }
&:first-of-type { &:hover:not(.affix) {
margin-left: 15px; padding-left: 13px;
padding-right: 13px;
> .close-icon {
width: 14px;
} }
&:last-of-type {
margin-right: 15px;
} }
&.active { &.active:not(.affix) {
background-color: #42b983; padding-left: 20px;
color: #fff; padding-right: 20px;
border-color: #42b983; > .close-icon {
&::before { width: 14px;
content: ""; }
background: #fff; }
display: inline-block; .close-icon {
width: 8px;
height: 8px;
border-radius: 50%;
position: relative; position: relative;
margin-right: 5px; right: -2px;
} width: 0;
height: 14px;
margin-left: 5px;
transition: all var(--el-transition-duration) var(--el-transition-function-ease-in-out-bezier);
} }
} }
} }
@ -291,15 +298,29 @@ onMounted(() => {
list-style-type: none; list-style-type: none;
padding: 5px 0; padding: 5px 0;
border-radius: 4px; border-radius: 4px;
font-size: 12px; font-size: var(--el-font-size-base);
color: var(--el-text-color-regular);
font-weight: 400; font-weight: 400;
box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3); box-shadow: var(--el-box-shadow-light);
li { li {
display: flex;
align-items: center;
white-space: nowrap;
list-style: none;
line-height: 22px;
padding: 5px 16px;
margin: 0; margin: 0;
padding: 7px 16px; border-top: 1px solid var(--el-border-color-lighter);
font-size: var(--el-font-size-base);
color: var(--el-text-color-regular);
cursor: pointer; cursor: pointer;
outline: none;
&:first-child {
border: none;
}
&:hover { &:hover {
background: #eee; background-color: #ecf5ff;
color: #409eff;
} }
} }
} }