hjq/mart-admin
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

'admin-22.04.29:优化滚动条问题及替换pinia后的bug'

Browse Source
This commit is contained in:
lyt 2022-04-29 22:57:31 +08:00
parent f6302a8b40
commit c630f04194
9 changed files with 80 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -18,6 +18,7 @@
- 🎯 优化 地址栏有参数退出登录，再次登录不跳之前界面问题 `src/layout/navBars/breadcrumb/user.vue`
- 🎯 优化 `SvgIcon` 组件，防止 `开启 Tagsview 图标` 时，`tagsView 右键菜单关闭` 报错问题
- 🎯 优化 [wangEditor](https://www.wangeditor.com/) 更新到 v5，[vue3 版本线上示例中 wangeditor 富文本编辑器 demo 实例,无法换行#I5565B](https://gitee.com/lyt-top/vue-next-admin/issues/I5565B)，感谢@[jenchih](https://gitee.com/jenchih)
- 🎯 优化 [在关闭 tagview 时，高度刷新时会会变化，出现滚动条](https://gitee.com/lyt-top/vue-next-admin/issues/I55FHM)，感谢[张松](https://gitee.com/zs310071113)
- 🎉 新增 [vuex](https://vuex.vuejs.org/) 替换成 [pinia](https://pinia.vuejs.org/getting-started.html)
- 🎉 新增 tagsView 支持自定义 tagsView 名称（文章详情时有用），前往体验：[路由参数/普通路由](https://lyt-top.gitee.io/vue-next-admin-preview/#/params/common)
- 🐞 修复 适配 `"element-plus": "^2.1.9"` 版本

24
src/layout/component/aside.vue
View File

@ -57,18 +57,12 @@ export default defineComponent({
} else {
if (layout === 'columns') {
// 分栏布局，菜单收起时宽度给 1px
if (isCollapse) {
return [asideBrColor, 'layout-aside-pc-1'];
} else {
return [asideBrColor, 'layout-aside-pc-220'];
}
if (isCollapse) return [asideBrColor, 'layout-aside-pc-1'];
else return [asideBrColor, 'layout-aside-pc-220'];
} else {
// 其它布局给 64px
if (isCollapse) {
return [asideBrColor, 'layout-aside-pc-64'];
} else {
return [asideBrColor, 'layout-aside-pc-220'];
}
if (isCollapse) return [asideBrColor, 'layout-aside-pc-64'];
else return [asideBrColor, 'layout-aside-pc-220'];
}
}
});
@ -122,11 +116,17 @@ export default defineComponent({
}
});
// 监听vuex值的变化，动态赋值给菜单中
watch(pinia.state, (val) => {
watch(
pinia.state,
(val) => {
let { layout, isClassicSplitMenu } = val.themeConfig.themeConfig;
if (layout === 'classic' && isClassicSplitMenu) return false;
setFilterRoutes();
});
},
{
deep: true,
}
);
// 页面加载前
onBeforeMount(() => {
initMenuFixed(document.body.clientWidth);

16
src/layout/component/columnsAside.vue
View File

@ -61,7 +61,6 @@ interface ColumnsAsideState {
liOldPath: null | string;
difference: number;
routeSplit: string[];
isNavHover: boolean;
}
export default defineComponent({
@ -84,7 +83,6 @@ export default defineComponent({
liOldPath: null,
difference: 0,
routeSplit: [],
isNavHover: false,
});
// 设置菜单高亮位置移动
const setColumnsAsideMove = (k: number) => {
@ -107,7 +105,6 @@ export default defineComponent({
proxy.mittBus.emit('setSendColumnsChildren', setSendChildren(path));
stores.setColumnsMenuHover(false);
stores.setColumnsNavHover(true);
state.isNavHover = true;
};
// 鼠标移走时，显示原来的子级菜单
const onColumnsAsideMenuMouseleave = async () => {
@ -116,7 +113,6 @@ export default defineComponent({
setTimeout(() => {
if (!isColumnsMenuHover && !isColumnsNavHover) proxy.mittBus.emit('restoreDefault');
}, 100);
// state.isNavHover = false;
};
// 设置高亮动态位置
const onColumnsAsideDown = (k: number) => {
@ -169,7 +165,9 @@ export default defineComponent({
}, 0);
};
// 监听布局配置信息的变化，动态增加菜单高亮位置移动像素
watch(pinia.state, (val) => {
watch(
pinia.state,
(val) => {
val.themeConfig.themeConfig.columnsAsideStyle === 'columnsRound' ? (state.difference = 3) : (state.difference = 0);
if (!val.routesList.isColumnsMenuHover && !val.routesList.isColumnsNavHover) {
state.liHoverIndex = null;
@ -179,7 +177,11 @@ export default defineComponent({
if (!state.liOldPath) return false;
proxy.mittBus.emit('setSendColumnsChildren', setSendChildren(state.liOldPath));
}
});
},
{
deep: true,
}
);
// 页面加载时
onMounted(() => {
setFilterRoutes();
@ -256,7 +258,7 @@ export default defineComponent({
}
}
.layout-columns-active {
color: var(--el-color-white) !important;
color: var(--next-bg-columnsMenuBarColor) !important;
transition: 0.3s ease-in-out;
}
.layout-columns-hover {

43
src/layout/component/main.vue
View File

@ -1,18 +1,26 @@
<template>
<el-main class="layout-main">
<el-scrollbar
class="layout-scrollbar"
ref="layoutScrollbarRef"
:style="{ padding: currentRouteMeta.isLink && currentRouteMeta.isIframe ? 0 : '', transition: 'padding 0.3s ease-in-out' }"
:class="{
'layout-scrollbar':
(!isClassicOrTransverse && !currentRouteMeta.isLink && !currentRouteMeta.isIframe) ||
(!isClassicOrTransverse && currentRouteMeta.isLink && !currentRouteMeta.isIframe),
}"
>
<LayoutParentView :style="{ minHeight: `calc(100vh - ${headerHeight})` }" />
<LayoutParentView
:style="{
padding: !isClassicOrTransverse || (currentRouteMeta.isLink && currentRouteMeta.isIframe) ? '0' : '15px',
transition: 'padding 0.3s ease-in-out',
}"
/>
<Footer v-if="themeConfig.isFooter" />
</el-scrollbar>
</el-main>
</template>
<script lang="ts">
import { defineComponent, toRefs, reactive, getCurrentInstance, watch, onMounted } from 'vue';
import { defineComponent, toRefs, reactive, getCurrentInstance, watch, onMounted, computed } from 'vue';
import { useRoute } from 'vue-router';
import { storeToRefs } from 'pinia';
import { useThemeConfig } from '/@/stores/themeConfig';
@ -37,12 +45,17 @@ export default defineComponent({
headerHeight: '',
currentRouteMeta: {},
});
// 判断布局
const isClassicOrTransverse = computed(() => {
const { layout } = themeConfig.value;
return layout === 'classic' || layout === 'transverse';
});
// 设置 main 的高度
const initHeaderHeight = () => {
const bool = state.currentRouteMeta.isLink && state.currentRouteMeta.isIframe;
let { isTagsview } = themeConfig.value;
if (isTagsview) return (state.headerHeight = bool ? `85px` : `114px`);
else return (state.headerHeight = `51px`);
if (isTagsview) return (state.headerHeight = bool ? `86px` : `115px`);
else return (state.headerHeight = `80px`);
};
// 初始化获取当前路由 meta，用于设置 iframes padding
const initGetMeta = () => {
@ -59,22 +72,26 @@ export default defineComponent({
() => {
state.currentRouteMeta = route.meta;
const bool = state.currentRouteMeta.isLink && state.currentRouteMeta.isIframe;
state.headerHeight = bool ? `85px` : `114px`;
state.headerHeight = bool ? `86px` : `115px`;
proxy.$refs.layoutScrollbarRef.update();
}
);
// 监听 themeConfig 配置文件的变化，更新菜单 el-scrollbar 的高度
watch(themeConfig, (val) => {
watch(
themeConfig,
(val) => {
state.currentRouteMeta = route.meta;
const bool = state.currentRouteMeta.isLink && state.currentRouteMeta.isIframe;
state.headerHeight = val.isTagsview ? (bool ? `85px` : `114px`) : '51px';
if (val.isFixedHeaderChange !== val.isFixedHeader) {
if (!proxy.$refs.layoutScrollbarRef) return false;
proxy.$refs.layoutScrollbarRef.update();
state.headerHeight = val.isTagsview ? (bool ? `86px` : `115px`) : '51px';
proxy.$refs?.layoutScrollbarRef?.update();
},
{
deep: true,
}
});
);
return {
themeConfig,
isClassicOrTransverse,
...toRefs(state),
};
},

10
src/layout/navBars/tagsView/tagsView.vue
View File

@ -553,10 +553,16 @@ export default defineComponent({
getTagsRefsIndex(getThemeConfig.value.isShareTagsView ? state.routePath : state.routeActive);
});
// 监听路由的变化，动态赋值给 tagsView
watch(pinia.state, (val) => {
watch(
pinia.state,
(val) => {
if (val.tagsViewRoutes.tagsViewRoutes.length === state.tagsViewRoutesList.length) return false;
getTagsViewRoutes();
});
},
{
deep: true,
}
);
// 监听路由的变化，用于设置不同的 tagsViewName
watch(
() => route,

2
src/layout/routerView/iframes.vue
View File

@ -41,7 +41,7 @@ export default defineComponent({
if (isTagsViewCurrenFull.value) {
return `1px`;
} else {
if (isTagsview) return `85px`;
if (isTagsview) return `86px`;
else return `51px`;
}
});

2
src/layout/routerView/link.vue
View File

@ -39,7 +39,7 @@ export default defineComponent({
// 设置 link 的高度
const setLinkHeight = computed(() => {
let { isTagsview } = themeConfig.value;
if (isTagsview) return `114px`;
if (isTagsview) return `115px`;
else return `80px`;
});
// 监听路由的变化，设置内容

8
src/layout/routerView/parent.vue
View File

@ -3,7 +3,7 @@
<router-view v-slot="{ Component }">
<transition :name="setTransitionName" mode="out-in">
<keep-alive :include="keepAliveNameList">
<component :is="Component" :key="refreshRouterViewKey" class="w100" :style="{ minHeight }" />
<component :is="Component" :key="refreshRouterViewKey" class="w100" />
</keep-alive>
</transition>
</router-view>
@ -25,12 +25,6 @@ interface ParentViewState {
export default defineComponent({
name: 'layoutParentView',
props: {
minHeight: {
type: String,
default: '',
},
},
setup() {
const { proxy } = <any>getCurrentInstance();
const route = useRoute();

4
src/router/route.ts
View File

@ -4,11 +4,11 @@ import { RouteRecordRaw } from 'vue-router';
* 路由meta对象参数说明
* meta: {
* title: 菜单栏及 tagsView 栏、菜单搜索名称（国际化）
* isLink： 是否超链接菜单，开启外链条件，`1、isLink:true 2、链接地址不为空`
* isLink： 是否超链接菜单，开启外链条件，`1、isLink: 链接地址不为空`
* isHide： 是否隐藏此路由
* isKeepAlive： 是否缓存组件状态
* isAffix： 是否固定在 tagsView 栏上
* isIframe： 是否内嵌窗口，，开启条件，`1、isIframe:true 2、链接地址不为空`
* isIframe： 是否内嵌窗口，，开启条件，`1、isIframe:true 2、isLink：链接地址不为空`
* roles： 当前路由权限标识，取角色管理。控制路由显示、隐藏。超级管理员：admin 普通角色：common
* icon： 菜单、tagsView 图标，阿里：加 `iconfont xxx`，fontawesome：加 `fa xxx`
* }