mirrors/pig-ui
1
0
Fork 0
mirror of https://gitee.com/log4j/pig-ui.git synced 2024-12-23 05:40:20 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

'admin-21.01.25:处理路由link、iframes跳转及页面切换动画优化等'

Browse Source
This commit is contained in:
lyt 2021-01-25 15:39:59 +08:00
parent 94dd0f7439
commit 0e155e0141
15 changed files with 185 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
vue-admin-wonderful-next/index.html
View File

@ -5,7 +5,7 @@
<link rel="icon" href="/favicon.ico" />
<link rel="stylesheet" type="text/css" href="/loading.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>demos</title>
<title>vue-admin-wonderful-next</title>
</head>
<body>
<div id="app">

57
vue-admin-wonderful-next/src/router/index.ts
View File

@ -14,6 +14,7 @@ export const dynamicRoutes = [
isHide: false,
isKeepAlive: true,
isAffix: true,
isIframe: false,
icon: 'iconfont icon-shouye'
},
children: [{
@ -26,6 +27,7 @@ export const dynamicRoutes = [
isHide: false,
isKeepAlive: true,
isAffix: true,
isIframe: false,
icon: 'iconfont icon-shouye'
}
},
@ -40,6 +42,7 @@ export const dynamicRoutes = [
isHide: false,
isKeepAlive: true,
isAffix: false,
isIframe: false,
icon: 'iconfont icon-xitongshezhi'
},
children: [
@ -53,6 +56,7 @@ export const dynamicRoutes = [
isHide: false,
isKeepAlive: true,
isAffix: false,
isIframe: false,
icon: 'iconfont icon-caidan'
}
},
@ -66,6 +70,7 @@ export const dynamicRoutes = [
isHide: false,
isKeepAlive: true,
isAffix: false,
isIframe: false,
icon: 'iconfont icon-icon-',
}
}
@ -82,6 +87,7 @@ export const dynamicRoutes = [
isHide: false,
isKeepAlive: true,
isAffix: false,
isIframe: false,
icon: 'iconfont icon-quanxian'
},
children: [
@ -95,7 +101,8 @@ export const dynamicRoutes = [
isLink: '',
isHide: false,
isKeepAlive: true,
isAffix: false
isAffix: false,
isIframe: false
},
children: [
{
@ -107,7 +114,8 @@ export const dynamicRoutes = [
isLink: '',
isHide: false,
isKeepAlive: true,
isAffix: false
isAffix: false,
isIframe: false
}
},
{
@ -119,7 +127,8 @@ export const dynamicRoutes = [
isLink: '',
isHide: false,
isKeepAlive: true,
isAffix: false
isAffix: false,
isIframe: false
}
}
]
@ -133,7 +142,8 @@ export const dynamicRoutes = [
isLink: '',
isHide: false,
isKeepAlive: true,
isAffix: false
isAffix: false,
isIframe: false
},
children: [
{
@ -145,7 +155,8 @@ export const dynamicRoutes = [
isLink: '',
isHide: false,
isKeepAlive: true,
isAffix: false
isAffix: false,
isIframe: false
}
},
{
@ -157,7 +168,8 @@ export const dynamicRoutes = [
isLink: '',
isHide: false,
isKeepAlive: true,
isAffix: false
isAffix: false,
isIframe: false
}
}
]
@ -175,6 +187,7 @@ export const dynamicRoutes = [
isHide: false,
isKeepAlive: true,
isAffix: false,
isIframe: false,
icon: 'iconfont icon-xitongshezhi'
},
children: [
@ -189,6 +202,7 @@ export const dynamicRoutes = [
isHide: false,
isKeepAlive: true,
isAffix: false,
isIframe: false,
icon: 'iconfont icon-caidan'
},
children: [
@ -202,6 +216,7 @@ export const dynamicRoutes = [
isHide: false,
isKeepAlive: true,
isAffix: false,
isIframe: false,
icon: 'iconfont icon-caidan'
}
},
@ -216,6 +231,7 @@ export const dynamicRoutes = [
isHide: false,
isKeepAlive: true,
isAffix: false,
isIframe: false,
icon: 'iconfont icon-caidan'
},
children: [
@ -229,6 +245,7 @@ export const dynamicRoutes = [
isHide: false,
isKeepAlive: true,
isAffix: false,
isIframe: false,
icon: 'iconfont icon-caidan'
}
},
@ -242,6 +259,7 @@ export const dynamicRoutes = [
isHide: false,
isKeepAlive: true,
isAffix: false,
isIframe: false,
icon: 'iconfont icon-caidan'
}
}
@ -257,6 +275,7 @@ export const dynamicRoutes = [
isHide: false,
isKeepAlive: true,
isAffix: false,
isIframe: false,
icon: 'iconfont icon-caidan'
}
}
@ -272,6 +291,7 @@ export const dynamicRoutes = [
isHide: false,
isKeepAlive: true,
isAffix: false,
isIframe: false,
icon: 'iconfont icon-caidan'
}
}
@ -288,6 +308,7 @@ export const dynamicRoutes = [
isHide: false,
isKeepAlive: true,
isAffix: false,
isIframe: false,
icon: 'iconfont icon-crew_feature'
},
children: [
@ -301,6 +322,7 @@ export const dynamicRoutes = [
isHide: false,
isKeepAlive: true,
isAffix: false,
isIframe: false,
icon: 'el-icon-thumb'
}
}
@ -316,6 +338,7 @@ export const dynamicRoutes = [
isHide: false,
isKeepAlive: true,
isAffix: false,
isIframe: false,
icon: 'iconfont icon-fuzhiyemian'
}
},
@ -329,6 +352,7 @@ export const dynamicRoutes = [
isHide: false,
isKeepAlive: true,
isAffix: false,
isIframe: false,
icon: 'iconfont icon-zujian'
}
},
@ -342,6 +366,7 @@ export const dynamicRoutes = [
isHide: false,
isKeepAlive: true,
isAffix: false,
isIframe: false,
icon: 'iconfont icon-ico_shuju'
}
},
@ -355,6 +380,7 @@ export const dynamicRoutes = [
isHide: false,
isKeepAlive: true,
isAffix: false,
isIframe: false,
icon: 'iconfont icon-gerenzhongxin'
}
},
@ -368,32 +394,35 @@ export const dynamicRoutes = [
isHide: false,
isKeepAlive: true,
isAffix: false,
isIframe: false,
icon: 'iconfont icon-gongju'
}
},
{
path: '/link',
name: 'link',
name: 'layoutLinkView',
component: () => import('/@/views/layout/routerView/parent.vue'),
meta: {
title: '外链',
isLink: '',
isHide: true,
isKeepAlive: true,
isAffix: true,
isLink: 'https://element-plus.gitee.io/#/zh-CN/component/installation',
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
icon: 'iconfont icon-caozuo-wailian'
}
},
{
path: '/iframes',
name: 'iframes',
component: () => import('/@/views/layout/routerView/iframes.vue'),
name: 'layoutIfameView',
component: () => import('/@/views/layout/routerView/parent.vue'),
meta: {
title: '内嵌 iframe',
isLink: '',
isLink: 'https://gitee.com/lyt-top/vue-admin-wonderful',
isHide: false,
isKeepAlive: true,
isAffix: true,
isIframe: true,
icon: 'iconfont icon-neiqianshujuchucun'
}
}]

14
vue-admin-wonderful-next/src/theme/app.scss
View File

@ -38,6 +38,9 @@ body,
display: flex;
flex-direction: column;
overflow-x: hidden !important;
.el-scrollbar__view {
overflow: hidden;
}
}
.el-header {
box-shadow: 0 1px 4px rgb(0 21 41 / 4%);
@ -46,10 +49,18 @@ body,
.el-main {
padding: 0 !important;
overflow: hidden;
width: 100%;
}
.el-scrollbar {
width: 100%;
}
.layout-view-bg-white {
background: white;
width: 100%;
height: 100%;
border-radius: 4px;
border: 1px solid rgba(238, 238, 238, 0.6);
}
.layout-el-aside-br-color {
border-right: 1px solid rgb(238, 238, 238);
}
@ -111,6 +122,9 @@ body,
flex-direction: column;
width: 100%;
}
.flex-margin {
margin: auto;
}
/* 宽高 100%
------------------------------- */

5
vue-admin-wonderful-next/src/theme/common/transition.scss
View File

@ -6,8 +6,8 @@
.slide-left-leave-active {
will-change: transform;
transition: all 0.3s ease;
position: absolute;
}
// slide-right
.slide-right-enter-from {
opacity: 0;
transform: translateX(-20px);
@ -16,17 +16,18 @@
opacity: 0;
transform: translateX(20px);
}
// slide-left
.slide-left-enter-from {
@extend .slide-right-leave-to;
}
.slide-left-leave-to {
@extend .slide-right-enter-from;
}
// opacitys
.opacitys-enter-active,
.opacitys-leave-active {
will-change: transform;
transition: all 0.3s ease;
position: absolute;
}
.opacitys-enter-from,
.opacitys-leave-to {

4
vue-admin-wonderful-next/src/theme/element.scss
View File

@ -737,6 +737,10 @@
color: inherit;
text-decoration: none;
}
.el-menu-item a {
width: 86%;
display: inline-block;
}
// 默认 hover 时
.el-menu-item:hover,
.el-submenu__title:hover {

38
vue-admin-wonderful-next/src/views/layout/component/main.vue
View File

@ -1,10 +1,15 @@
<template>
<el-main>
<el-scrollbar class="layout-scrollbar" ref="layoutScrollbarRef"
v-show="!currentRouteMeta.isLink && !currentRouteMeta.isIframe"
:style="{minHeight: `calc(100vh - ${headerHeight}`}">
<LayoutParentView />
<Footer v-if="getThemeConfig.isFooter" />
</el-scrollbar>
<Link :style="{height: `calc(100vh - ${headerHeight}`}" :meta="currentRouteMeta"
v-if="currentRouteMeta.isLink && !currentRouteMeta.isIframe" />
<Iframes :style="{height: `calc(100vh - ${headerHeight}`}" :meta="currentRouteMeta"
v-if="currentRouteMeta.isLink && currentRouteMeta.isIframe" />
</el-main>
</template>
@ -16,23 +21,44 @@ import {
reactive,
getCurrentInstance,
watch,
onBeforeMount,
} from "vue";
import { useRoute } from "vue-router";
import { useStore } from "/@/store/index.ts";
import LayoutParentView from "/@/views/layout/routerView/parent.vue";
import Footer from "/@/views/layout/footer/index.vue";
import Link from "/@/views/layout/routerView/link.vue";
import Iframes from "/@/views/layout/routerView/iframes.vue";
export default defineComponent({
name: "layoutMain",
components: { LayoutParentView, Footer },
components: { LayoutParentView, Footer, Link, Iframes },
setup() {
const { proxy } = getCurrentInstance();
const store = useStore();
const route = useRoute();
const state = reactive({
headerHeight: "84px",
headerHeight: "",
currentRouteMeta: {},
});
// 获取布局配置信息
const getThemeConfig = computed(() => {
return store.state.themeConfig;
});
// 初始化当前路由 meta 信息
const initCurrentRouteMeta = (meta: object) => {
state.currentRouteMeta = meta;
};
// 设置 main 的高度
const initHeaderHeight = () => {
let { isTagsview } = store.state.themeConfig;
if (isTagsview) return (state.headerHeight = `84px`);
else return (state.headerHeight = `50px`);
};
// 页面加载前
onBeforeMount(() => {
initCurrentRouteMeta(route.meta);
initHeaderHeight();
});
// 监听 themeConfig 配置文件的变化，更新菜单 el-scrollbar 的高度
watch(store.state.themeConfig, (val) => {
state.headerHeight = val.isTagsview ? "84px" : "50px";
@ -41,8 +67,16 @@ export default defineComponent({
proxy.$refs.layoutScrollbarRef.update();
}
});
// 监听路由的变化
watch(
() => route.path,
() => {
initCurrentRouteMeta(route.meta);
}
);
return {
getThemeConfig,
initCurrentRouteMeta,
...toRefs(state),
};
},

1
vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/breadcrumb.vue
View File

@ -66,6 +66,7 @@ export default {
};
// 当前路由字符串切割成数组，并删除第一项空内容
const initRouteSplit = (path: string) => {
if (!store.state.themeConfig.isBreadcrumb) return false;
state.breadcrumbList = [store.state.routes[0]];
state.routeSplit = path.split("/");
state.routeSplit.shift();

4
vue-admin-wonderful-next/src/views/layout/navBars/index.vue
View File

@ -17,8 +17,8 @@ export default {
const store = useStore();
// 是否显示 tagsView
const setShowTagsView = computed(() => {
let { layout } = store.state.themeConfig;
return layout !== "classic";
let { layout, isTagsview } = store.state.themeConfig;
return layout !== "classic" && isTagsview;
});
return {
setShowTagsView,

4
vue-admin-wonderful-next/src/views/layout/navBars/tagsView/tagsView.vue
View File

@ -1,6 +1,5 @@
<template>
<div class="layout-navbars-tagsview" :class="{'layout-navbars-tagsview-shadow': getThemeConfig.layout === 'classic'}"
v-show="getThemeConfig.isTagsview">
<div class="layout-navbars-tagsview" :class="{'layout-navbars-tagsview-shadow': getThemeConfig.layout === 'classic'}">
<Scroll ref="scrollRef">
<ul class="layout-navbars-tagsview-ul" :class="setTagsStyle">
<li v-for="(v,k) in tagsViewList" :key="k" class="layout-navbars-tagsview-ul-li" :data-name="v.name"
@ -103,6 +102,7 @@ export default {
const addTagsView = (path: string) => {
if (state.tagsViewList.some((v) => v.path === path)) return false;
const item = store.state.tagsViewRoutes.find((v) => v.path === path);
if (item.meta.isLink && !item.meta.isIframe) return false;
if (!item.meta.isHide) state.tagsViewList.push({ ...item });
addBrowserSetSession(state.tagsViewList);
};

9
vue-admin-wonderful-next/src/views/layout/navMenu/horizontal.vue
View File

@ -12,7 +12,8 @@
</el-submenu>
<el-menu-item :index="val.path" :key="val.path" v-else>
<i :class="val.meta.icon ? val.meta.icon : ''"></i>
<template #title v-if="!val.meta.isLink">{{ val.meta.title }}</template>
<template #title
v-if="!val.meta.isLink || val.meta.isLink && val.meta.isIframe">{{ val.meta.title }}</template>
<template #title v-else><a :href="val.meta.isLink" target="_blank">{{ val.meta.title }}</a></template>
</el-menu-item>
</template>
@ -107,8 +108,14 @@ export default defineComponent({
flex: 1;
overflow: hidden;
margin-right: 30px;
::v-deep(.el-scrollbar__bar.is-vertical) {
display: none;
}
.el-menu.el-menu--horizontal {
display: flex;
height: 100%;
width: 100%;
box-sizing: border-box;
}
}
</style>

2
vue-admin-wonderful-next/src/views/layout/navMenu/subItem.vue
View File

@ -9,7 +9,7 @@
</el-submenu>
<el-menu-item :index="val.path" :key="val.path" v-else>
<i :class="val.meta.icon ? val.meta.icon : ''"></i>
<template v-if="!val.meta.isLink">
<template v-if="!val.meta.isLink || val.meta.isLink && val.meta.isIframe">
<span>{{ val.meta.title }}</span>
</template>
<template v-else><a :href="val.meta.isLink" target="_blank">{{ val.meta.title }}</a></template>

2
vue-admin-wonderful-next/src/views/layout/navMenu/vertical.vue
View File

@ -11,7 +11,7 @@
</el-submenu>
<el-menu-item :index="val.path" :key="val.path" v-else>
<i :class="val.meta.icon ? val.meta.icon : ''"></i>
<template #title v-if="!val.meta.isLink">
<template #title v-if="!val.meta.isLink || val.meta.isLink && val.meta.isIframe">
<span>{{ val.meta.title }}</span>
</template>
<template #title v-else><a :href="val.meta.isLink" target="_blank">{{ val.meta.title }}</a></template>

46
vue-admin-wonderful-next/src/views/layout/routerView/iframes.vue
View File

@ -1,21 +1,49 @@
<template>
<div>
iframes
<el-input v-model="val"></el-input>
<div class="layout-scrollbar">
<div class="layout-view-bg-white flex h100" v-loading="iframeLoading">
<iframe :src="currentRouteMeta.isLink" frameborder="0" height="100%" width="100%" id="iframe"></iframe>
</div>
</div>
</template>
<script lang="ts">
import { toRefs, reactive } from "vue";
export default {
name: "iframes",
setup() {
import {
defineComponent,
computed,
reactive,
toRefs,
onMounted,
nextTick,
} from "vue";
export default defineComponent({
name: "layoutIfameView",
props: {
meta: {
type: Object,
default: () => {},
},
},
setup(props) {
const state = reactive({
val: "",
iframeLoading: true,
});
// 获取父级菜单数据
const currentRouteMeta = computed(() => {
return props.meta;
});
// 页面加载时
onMounted(() => {
nextTick(() => {
const iframe = document.getElementById("iframe");
iframe.onload = () => {
state.iframeLoading = false;
};
});
});
return {
currentRouteMeta,
...toRefs(state),
};
},
};
});
</script>

30
vue-admin-wonderful-next/src/views/layout/routerView/link.vue Normal file
View File

@ -0,0 +1,30 @@
<template>
<div class="layout-scrollbar">
<div class="layout-view-bg-white flex">
<a :href="currentRouteMeta.isLink" target="_blank"
class="flex-margin">{{currentRouteMeta.title}}：{{currentRouteMeta.isLink}}</a>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, computed } from "vue";
export default defineComponent({
name: "layoutLinkView",
props: {
meta: {
type: Object,
default: () => {},
},
},
setup(props) {
// 获取父级菜单数据
const currentRouteMeta = computed(() => {
return props.meta;
});
return {
currentRouteMeta,
};
},
});
</script>

13
vue-admin-wonderful-next/src/views/layout/routerView/parent.vue
View File

@ -3,7 +3,7 @@
<router-view v-slot="{ Component }">
<transition :name="setTransitionName" mode="out-in">
<keep-alive :include="getCaches">
<component :is="Component" :key="refreshRouterViewKey" />
<component :is="Component" :key="refreshRouterViewKey" class="w100" />
</keep-alive>
</transition>
</router-view>
@ -38,7 +38,6 @@ export default defineComponent({
const store = useStore();
const state = reactive({
transitionName: "slide-right",
headerHeight: "84px",
refreshRouterViewKey: route.path,
});
// 设置主界面切换动画
@ -59,19 +58,11 @@ export default defineComponent({
const getCaches = computed(() => {
return store.state.caches;
});
// 监听 themeConfig 配置文件的变化，更新菜单 el-scrollbar 的高度
watch(store.state.themeConfig, (val) => {
state.headerHeight = val.isTagsview ? "84px" : "50px";
if (val.isFixedHeaderChange !== val.isFixedHeader) {
if (!proxy.$refs.layoutScrollbarRef) return false;
proxy.$refs.layoutScrollbarRef.update();
}
});
// 路由更新时
onBeforeRouteUpdate((to) => {
state.refreshRouterViewKey = to.path;
});
// 页面加载时
// 页面加载前
onBeforeMount(() => {
proxy.mittBus.on("onTagsViewRefreshRouterView", (path: string) => {
if (route.path !== path) return false;