update: Tab栏样式和右键菜单样式优化
This commit is contained in:
pengmingdong
parent
cc9b67d467
commit
ed74f36a72
1
.gitignore
vendored
1
.gitignore
vendored
@ -21,6 +21,7 @@ selenium-debug.log
|
||||
*.local
|
||||
|
||||
package-lock.json
|
||||
pnpm-lock.yaml
|
||||
yarn.lock
|
||||
|
||||
# 编译生成的文件
|
||||
|
||||
@ -1,30 +1,31 @@
|
||||
<template>
|
||||
<div id="tags-view-container" class="tags-view-container">
|
||||
<scroll-pane ref="scrollPaneRef" class="tags-view-wrapper" @scroll="handleScroll">
|
||||
<router-link
|
||||
v-for="tag in visitedViews"
|
||||
:key="tag.path"
|
||||
:data-path="tag.path"
|
||||
:class="isActive(tag) ? 'active' : ''"
|
||||
:to="{ path: tag.path ? tag.path : '', query: tag.query, fullPath: tag.fullPath ? tag.fullPath : '' }"
|
||||
class="tags-view-item"
|
||||
:style="activeStyle(tag)"
|
||||
@click.middle="!isAffix(tag) ? closeSelectedTag(tag) : ''"
|
||||
@contextmenu.prevent="openMenu(tag, $event)"
|
||||
>
|
||||
{{ tag.title }}
|
||||
<span v-if="!isAffix(tag)" @click.prevent.stop="closeSelectedTag(tag)">
|
||||
<close class="el-icon-close" style="width: 1em; height: 1em;vertical-align: middle;" />
|
||||
</span>
|
||||
</router-link>
|
||||
<div class="tabs-wrapper">
|
||||
<div class="tabs-nav">
|
||||
<router-link
|
||||
v-for="tag in visitedViews"
|
||||
:key="tag.path"
|
||||
:data-path="tag.path"
|
||||
:class="{ active: isActive(tag), affix: isAffix(tag) }"
|
||||
:to="{ path: tag.path ? tag.path : '', query: tag.query, fullPath: tag.fullPath ? tag.fullPath : '' }"
|
||||
class="tags-view-item"
|
||||
@click.middle="!isAffix(tag) ? closeSelectedTag(tag) : ''"
|
||||
@contextmenu.prevent="openMenu(tag, $event)"
|
||||
>
|
||||
{{ tag.title }}
|
||||
<el-icon v-if="!isAffix(tag)" class="close-icon" @click.prevent.stop="closeSelectedTag(tag)"><Close /></el-icon>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</scroll-pane>
|
||||
<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 v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)"><close style="width: 1em; height: 1em;" /> 关闭当前</li>
|
||||
<li @click="closeOthersTags"><circle-close style="width: 1em; height: 1em;" /> 关闭其他</li>
|
||||
<li v-if="!isFirstView()" @click="closeLeftTags"><back style="width: 1em; height: 1em;" /> 关闭左侧</li>
|
||||
<li v-if="!isLastView()" @click="closeRightTags"><right style="width: 1em; height: 1em;" /> 关闭右侧</li>
|
||||
<li @click="closeAllTags(selectedTag)"><circle-close 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 class="mr-5px" 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 class="mr-5px" 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 class="mr-5px" style="width: 1em; height: 1em;" /> 全部关闭</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
@ -68,13 +69,6 @@ watch(visible, (value) => {
|
||||
const isActive = (r: TagView): boolean => {
|
||||
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) => {
|
||||
return tag.meta && tag.meta.affix;
|
||||
}
|
||||
@ -238,49 +232,62 @@ onMounted(() => {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tags-view-container {
|
||||
height: 34px;
|
||||
width: 100%;
|
||||
background-color: var(--el-bg-color);
|
||||
border: 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);
|
||||
.tags-view-wrapper {
|
||||
.tags-view-item {
|
||||
display: inline-block;
|
||||
--el-tabs-header-height: 40px;
|
||||
.tabs-wrapper {
|
||||
height: calc(var(--el-tabs-header-height) + 2px);
|
||||
border-bottom: 1px solid var(--el-border-color-light);
|
||||
.tabs-nav {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
height: 26px;
|
||||
line-height: 23px;
|
||||
background-color: var(--el-bg-color);
|
||||
float: left;
|
||||
display: flex;
|
||||
white-space: nowrap;
|
||||
border: 1px solid var(--el-border-color-light);
|
||||
color: #495060;
|
||||
padding: 0 8px;
|
||||
font-size: 12px;
|
||||
margin-left: 5px;
|
||||
margin-top: 4px;
|
||||
&:hover {
|
||||
border-radius: 4px 4px 0 0;
|
||||
transition: transform var(--el-transition-duration);
|
||||
margin-bottom: -1px;
|
||||
scrollbar-color: var(--el-fill-color-light);
|
||||
}
|
||||
.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);
|
||||
}
|
||||
&:first-of-type {
|
||||
margin-left: 15px;
|
||||
}
|
||||
&:last-of-type {
|
||||
margin-right: 15px;
|
||||
}
|
||||
&.active {
|
||||
background-color: #42b983;
|
||||
color: #fff;
|
||||
border-color: #42b983;
|
||||
&::before {
|
||||
content: "";
|
||||
background: #fff;
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
margin-right: 5px;
|
||||
&:hover:not(.affix) {
|
||||
padding-left: 13px;
|
||||
padding-right: 13px;
|
||||
> .close-icon {
|
||||
width: 14px;
|
||||
}
|
||||
}
|
||||
&.active:not(.affix) {
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
> .close-icon {
|
||||
width: 14px;
|
||||
}
|
||||
}
|
||||
.close-icon {
|
||||
position: relative;
|
||||
right: -2px;
|
||||
width: 0;
|
||||
height: 14px;
|
||||
margin-left: 5px;
|
||||
transition: all var(--el-transition-duration) var(--el-transition-function-ease-in-out-bezier);
|
||||
}
|
||||
}
|
||||
}
|
||||
.contextmenu {
|
||||
@ -291,15 +298,29 @@ onMounted(() => {
|
||||
list-style-type: none;
|
||||
padding: 5px 0;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
font-size: var(--el-font-size-base);
|
||||
color: var(--el-text-color-regular);
|
||||
font-weight: 400;
|
||||
box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
|
||||
box-shadow: var(--el-box-shadow-light);
|
||||
li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
list-style: none;
|
||||
line-height: 22px;
|
||||
padding: 5px 16px;
|
||||
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;
|
||||
outline: none;
|
||||
&:first-child {
|
||||
border: none;
|
||||
}
|
||||
&:hover {
|
||||
background: #eee;
|
||||
background-color: #ecf5ff;
|
||||
color: #409eff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user