Skip to content

W
wangxiaolu-sfa-ui
提交 1bc8ebe5 authored 作者: lidongxu's avatar lidongxu
浏览文件
操作

refactor(tagsview): 修复：尝试修复 tagview 在移动端显示不全问题

上级 264d47d5
隐藏空白字符变更
内嵌 并排
正在显示 包含 121 行增加 和 79 行删除
src/layout/components/TagsView/ScrollPane.vue
浏览文件 @ 1bc8ebe5
...@@ -104,7 +104,7 @@ defineExpose({ ...@@ -104,7 +104,7 @@ defineExpose({
} }
:deep(.el-scrollbar__wrap) { :deep(.el-scrollbar__wrap) {
height: 34px !important; // height: 34px !important;
/* 与tags-view-container高度保持一致 */ /* 与tags-view-container高度保持一致 */
overflow-y: hidden !important; overflow-y: hidden !important;
/* 明确禁用垂直滚动 */ /* 明确禁用垂直滚动 */
......
src/layout/components/TagsView/index.vue
浏览文件 @ 1bc8ebe5
<template> <template>
<div id="tags-view-container" class="tags-view-container"> <div id="tags-view-container"
<scroll-pane ref="scrollPaneRef" class="tags-view-wrapper" @scroll="handleScroll"> class="tags-view-container">
<router-link <scroll-pane ref="scrollPaneRef"
v-for="tag in visitedViews" class="tags-view-wrapper"
@scroll="handleScroll">
<router-link v-for="tag in visitedViews"
:key="tag.path" :key="tag.path"
:data-path="tag.path" :data-path="tag.path"
:class="isActive(tag) ? 'active' : ''" :class="isActive(tag) ? 'active' : ''"
...@@ -10,28 +12,34 @@ ...@@ -10,28 +12,34 @@
class="tags-view-item" class="tags-view-item"
:style="activeStyle(tag)" :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)"> <span v-if="!isAffix(tag)"
<close class="el-icon-close" style="width: 1em; height: 1em;vertical-align: middle;" /> @click.prevent.stop="closeSelectedTag(tag)">
<close class="el-icon-close"
style="width: 1em; height: 1em;vertical-align: middle;" />
</span> </span>
</router-link> </router-link>
</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)"> <li @click="refreshSelectedTag(selectedTag)">
<refresh-right style="width: 1em; height: 1em;" /> 刷新页面 <refresh-right style="width: 1em; height: 1em;" /> 刷新页面
</li> </li>
<li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)"> <li v-if="!isAffix(selectedTag)"
@click="closeSelectedTag(selectedTag)">
<close style="width: 1em; height: 1em;" /> 关闭当前 <close style="width: 1em; height: 1em;" /> 关闭当前
</li> </li>
<li @click="closeOthersTags"> <li @click="closeOthersTags">
<circle-close style="width: 1em; height: 1em;" /> 关闭其他 <circle-close style="width: 1em; height: 1em;" /> 关闭其他
</li> </li>
<li v-if="!isFirstView()" @click="closeLeftTags"> <li v-if="!isFirstView()"
@click="closeLeftTags">
<back style="width: 1em; height: 1em;" /> 关闭左侧 <back style="width: 1em; height: 1em;" /> 关闭左侧
</li> </li>
<li v-if="!isLastView()" @click="closeRightTags"> <li v-if="!isLastView()"
@click="closeRightTags">
<right style="width: 1em; height: 1em;" /> 关闭右侧 <right style="width: 1em; height: 1em;" /> 关闭右侧
</li> </li>
<li @click="closeAllTags(selectedTag)"> <li @click="closeAllTags(selectedTag)">
...@@ -141,7 +149,7 @@ function initTags() { ...@@ -141,7 +149,7 @@ function initTags() {
for (const tag of res) { for (const tag of res) {
// Must have tag name // Must have tag name
if (tag.name) { if (tag.name) {
useTagsViewStore().addVisitedView(tag) useTagsViewStore().addVisitedView(tag)
} }
} }
} }
...@@ -257,81 +265,105 @@ function handleScroll() { ...@@ -257,81 +265,105 @@ function handleScroll() {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss"
.tags-view-container { scoped>
height: 34px; .tags-view-container {
width: 100%; height: 34px;
background: var(--tags-bg, #fff); width: 100%;
border-bottom: 1px solid var(--tags-item-border, #d8dce5); background: var(--tags-bg, #fff);
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04); border-bottom: 1px solid var(--tags-item-border, #d8dce5);
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
.tags-view-wrapper {
.tags-view-item { // 添加移动端适配
display: inline-block; @media (max-width: 768px) {
position: relative; height: 40px; // 移动端适当增加高度
cursor: pointer;
height: 26px; .tags-view-wrapper {
line-height: 26px; .tags-view-item {
border: 1px solid var(--tags-item-border, #d8dce5); height: 32px;
color: var(--tags-item-text, #495060); line-height: 32px;
background: var(--tags-item-bg, #fff); font-size: 13px;
padding: 0 8px; padding: 0 6px;
font-size: 12px; margin-top: 4px;
margin-left: 5px;
margin-top: 4px; &:first-of-type {
margin-left: 10px;
&:first-of-type { }
margin-left: 15px;
&:last-of-type {
margin-right: 10px;
}
}
} }
}
&:last-of-type { .tags-view-wrapper {
margin-right: 15px; .tags-view-item {
} display: inline-block;
position: relative;
cursor: pointer;
height: 26px;
line-height: 26px;
border: 1px solid var(--tags-item-border, #d8dce5);
color: var(--tags-item-text, #495060);
background: var(--tags-item-bg, #fff);
padding: 0 8px;
font-size: 12px;
margin-left: 5px;
margin-top: 4px;
&:first-of-type {
margin-left: 15px;
}
&.active { &:last-of-type {
background-color: #42b983; margin-right: 15px;
color: #fff; }
border-color: #42b983;
&.active {
&::before { background-color: #42b983;
content: ''; color: #fff;
background: #fff; border-color: #42b983;
display: inline-block;
width: 8px; &::before {
height: 8px; content: '';
border-radius: 50%; background: #fff;
position: relative; display: inline-block;
margin-right: 5px; width: 8px;
height: 8px;
border-radius: 50%;
position: relative;
margin-right: 5px;
}
} }
} }
} }
}
.contextmenu { .contextmenu {
margin: 0;
background: var(--el-bg-color-overlay, #fff);
z-index: 3000;
position: absolute;
list-style-type: none;
padding: 5px 0;
border-radius: 4px;
font-size: 12px;
font-weight: 400;
color: var(--tags-item-text, #333);
box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
border: 1px solid var(--el-border-color-light, #e4e7ed);
li {
margin: 0; margin: 0;
padding: 7px 16px; background: var(--el-bg-color-overlay, #fff);
cursor: pointer; z-index: 3000;
position: absolute;
&:hover { list-style-type: none;
background: var(--tags-item-hover, #eee); padding: 5px 0;
border-radius: 4px;
font-size: 12px;
font-weight: 400;
color: var(--tags-item-text, #333);
box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
border: 1px solid var(--el-border-color-light, #e4e7ed);
li {
margin: 0;
padding: 7px 16px;
cursor: pointer;
&:hover {
background: var(--tags-item-hover, #eee);
}
} }
} }
} }
}
</style> </style>
<style lang="scss"> <style lang="scss">
......
src/layout/index.vue
浏览文件 @ 1bc8ebe5
...@@ -106,7 +106,7 @@ function setLayout() { ...@@ -106,7 +106,7 @@ function setLayout() {
transition: width 0.28s; transition: width 0.28s;
} }
.app-main{ .app-main {
// 头部固定菜单高度 50px // 头部固定菜单高度 50px
height: calc(100vh - 50px); height: calc(100vh - 50px);
} }
...@@ -122,6 +122,11 @@ function setLayout() { ...@@ -122,6 +122,11 @@ function setLayout() {
.fixed-header+.app-main { .fixed-header+.app-main {
height: 100vh; height: 100vh;
padding-top: 84px; padding-top: 84px;
// 移动端适配
@media (max-width: 768px) {
padding-top: 90px; // 调整为50px导航栏 + 40px TagsView
}
} }
} }
...@@ -136,6 +141,11 @@ function setLayout() { ...@@ -136,6 +141,11 @@ function setLayout() {
.mobile .fixed-header { .mobile .fixed-header {
width: 100%; width: 100%;
// 确保移动端TagsView正确显示
.tags-view-container {
height: 40px;
}
} }
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论