🔱: [client] sync upgrade with 21 commits [trident-sync]
'admin-22.12.12:发布v2.4.21版本,具体更新内容查看CHANGELOG.md' !42 修复 工作流无法添加新节点问题 Merge pull request !42 from beta/bugfix_workflow 修复 工作流无法添加新节点问题 1. 修复 工作流无法添加新节点问题 2. 修复 左侧导航无法隐藏问题 'admin-22.12.09:发布v2.4.2版本,具体更新内容查看CHANGELOG.md' !41 修复get请求传递嵌套对象或数组时无法正常编码问题 Merge pull request !41 from 随心/master !40 开启TagsView缓存后,刷新后所有的路由都变成组件缓存了 Merge pull request !40 from mrjimin/master 修复get请求传递嵌套对象或数组时无法正常编码问题 update src/layout/routerView/parent.vue. Signed-off-by: mrjimin <z8888788@163.com> update src/layout/routerView/parent.vue. 这里应该拿到的是已经设置开启组件缓存的路由,而不是全部,需要先判断item.meta.isKeepAlive Signed-off-by: mrjimin <z8888788@163.com> 'admin-22.11.30:发布v2.4.1版本,具体更新内容查看CHANGELOG.md' Merge branch 'master' of https://gitee.com/lyt-top/vue-next-admin 'admin-22.11.30:删除v2.4.0版本不需要的依赖' update src/views/error/404.vue. Signed-off-by: lyt-Top <1105290566@qq.com> update src/components/table/index.vue. Signed-off-by: lyt-Top <1105290566@qq.com> 'admin-22.11.30:修改v2.4.0文字说明' 'admin-22.11.30:修改v2.4.0文字说明' 'admin-22.11.29:发布v2.4.0版本,具体更新内容查看CHANGELOG.md' 'admin-22.11.19:修复v2.3.0版本动态路由事件调用关闭当前tagsview、普通路由刷新界面参数丢失问题' 'admin-22.11.18:优化v2.3.0版本tagsview风格5兼容火狐' 'admin-22.11.17:优化v2.3.0版本iframe右键菜单刷新问题' ...
This commit is contained in:
101
web/src/layout/routerView/iframes.vue
Normal file
101
web/src/layout/routerView/iframes.vue
Normal file
@@ -0,0 +1,101 @@
|
||||
<template>
|
||||
<div class="layout-padding layout-padding-unset layout-iframe">
|
||||
<div class="layout-padding-auto layout-padding-view">
|
||||
<div class="w100" v-for="v in setIframeList" :key="v.path" v-loading="v.meta.loading" element-loading-background="white">
|
||||
<transition-group :name="name" mode="out-in">
|
||||
<iframe
|
||||
:src="v.meta.isLink"
|
||||
:key="v.path"
|
||||
frameborder="0"
|
||||
height="100%"
|
||||
width="100%"
|
||||
style="position: absolute"
|
||||
:data-url="v.path"
|
||||
v-show="getRoutePath === v.path"
|
||||
ref="iframeRef"
|
||||
/>
|
||||
</transition-group>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="layoutIframeView">
|
||||
import { computed, watch, ref, nextTick } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
|
||||
// 定义父组件传过来的值
|
||||
const props = defineProps({
|
||||
// 刷新 iframe
|
||||
refreshKey: {
|
||||
type: String,
|
||||
default: () => '',
|
||||
},
|
||||
// 过渡动画 name
|
||||
name: {
|
||||
type: String,
|
||||
default: () => 'slide-right',
|
||||
},
|
||||
// iframe 列表
|
||||
list: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
});
|
||||
|
||||
// 定义变量内容
|
||||
const iframeRef = ref();
|
||||
const route = useRoute();
|
||||
|
||||
// 处理 list 列表,当打开时,才进行加载
|
||||
const setIframeList = computed(() => {
|
||||
return (<RouteItems>props.list).filter((v: RouteItem) => v.meta?.isIframeOpen);
|
||||
});
|
||||
// 获取 iframe 当前路由 path
|
||||
const getRoutePath = computed(() => {
|
||||
return route.path;
|
||||
});
|
||||
// 关闭 iframe loading
|
||||
const closeIframeLoading = (val: string, item: RouteItem) => {
|
||||
nextTick(() => {
|
||||
if (!iframeRef.value) return false;
|
||||
iframeRef.value.forEach((v: HTMLElement) => {
|
||||
if (v.dataset.url === val) {
|
||||
v.onload = () => {
|
||||
if (item.meta?.isIframeOpen && item.meta.loading) item.meta.loading = false;
|
||||
};
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
// 监听路由变化,初始化 iframe 数据,防止多个 iframe 时,切换不生效
|
||||
watch(
|
||||
() => route.fullPath,
|
||||
(val) => {
|
||||
const item: any = props.list.find((v: any) => v.path === val);
|
||||
if (!item) return false;
|
||||
if (!item.meta.isIframeOpen) item.meta.isIframeOpen = true;
|
||||
closeIframeLoading(val, item);
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
}
|
||||
);
|
||||
// 监听 iframe refreshKey 变化,用于 tagsview 右键菜单刷新
|
||||
watch(
|
||||
() => props.refreshKey,
|
||||
() => {
|
||||
const item: any = props.list.find((v: any) => v.path === route.path);
|
||||
if (!item) return false;
|
||||
if (item.meta.isIframeOpen) item.meta.isIframeOpen = false;
|
||||
setTimeout(() => {
|
||||
item.meta.isIframeOpen = true;
|
||||
item.meta.loading = true;
|
||||
closeIframeLoading(route.fullPath, item);
|
||||
});
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
}
|
||||
);
|
||||
</script>
|
||||
Reference in New Issue
Block a user