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

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

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"` 版本

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) => {
let { layout, isClassicSplitMenu } = val.themeConfig.themeConfig;
if (layout === 'classic' && isClassicSplitMenu) return false;
setFilterRoutes();
});
watch(
pinia.state,
(val) => {
let { layout, isClassicSplitMenu } = val.themeConfig.themeConfig;
if (layout === 'classic' && isClassicSplitMenu) return false;
setFilterRoutes();
},
{
deep: true,
}
);
//
onBeforeMount(() => {
initMenuFixed(document.body.clientWidth);

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,17 +165,23 @@ export default defineComponent({
}, 0);
};
//
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;
proxy.mittBus.emit('setSendColumnsChildren', setSendChildren(route.path));
} else {
state.liHoverIndex = state.liOldIndex;
if (!state.liOldPath) return false;
proxy.mittBus.emit('setSendColumnsChildren', setSendChildren(state.liOldPath));
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;
proxy.mittBus.emit('setSendColumnsChildren', setSendChildren(route.path));
} else {
state.liHoverIndex = state.liOldIndex;
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 {

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) => {
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();
watch(
themeConfig,
(val) => {
state.currentRouteMeta = route.meta;
const bool = state.currentRouteMeta.isLink && state.currentRouteMeta.isIframe;
state.headerHeight = val.isTagsview ? (bool ? `86px` : `115px`) : '51px';
proxy.$refs?.layoutScrollbarRef?.update();
},
{
deep: true,
}
});
);
return {
themeConfig,
isClassicOrTransverse,
...toRefs(state),
};
},

View File

@ -553,10 +553,16 @@ export default defineComponent({
getTagsRefsIndex(getThemeConfig.value.isShareTagsView ? state.routePath : state.routeActive);
});
// tagsView
watch(pinia.state, (val) => {
if (val.tagsViewRoutes.tagsViewRoutes.length === state.tagsViewRoutesList.length) return false;
getTagsViewRoutes();
});
watch(
pinia.state,
(val) => {
if (val.tagsViewRoutes.tagsViewRoutes.length === state.tagsViewRoutesList.length) return false;
getTagsViewRoutes();
},
{
deep: true,
}
);
// tagsViewName
watch(
() => route,

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`;
}
});

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`;
});
//

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();

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`
* }