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

fix: transition组件热重载显示页面空白bug

Browse Source
This commit is contained in:
H0nGzA1
2023-09-16 02:00:22 +08:00
committed by 李强
parent 58b59c2ed0
commit 496c453615
1 changed files with 13 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
web/src/layout/routerView/parent.vue
View File

@@ -3,18 +3,21 @@
<router-view v-slot="{ Component }"> <router-view v-slot="{ Component }">
<transition :name="setTransitionName" mode="out-in"> <transition :name="setTransitionName" mode="out-in">
<keep-alive :include="getKeepAliveNames" v-if="showView"> <keep-alive :include="getKeepAliveNames" v-if="showView">
<component :is="Component" :key="state.refreshRouterViewKey" class="w100" v-show="!isIframePage" /> <div>
<component :is="Component" :key="state.refreshRouterViewKey" class="w100" v-show="!isIframePage" />
</div>
</keep-alive> </keep-alive>
</transition> </transition>
</router-view> </router-view>
<transition :name="setTransitionName" mode="out-in"> <transition :name="setTransitionName" mode="out-in">
<Iframes class="w100" v-show="isIframePage" :refreshKey="state.iframeRefreshKey" :name="setTransitionName" :list="state.iframeList" /> <Iframes class="w100" v-show="isIframePage" :refreshKey="state.iframeRefreshKey" :name="setTransitionName"
:list="state.iframeList" />
</transition> </transition>
</div> </div>
</template> </template>
<script setup lang="ts" name="layoutParentView"> <script setup lang="ts" name="layoutParentView">
import { defineAsyncComponent, computed, reactive, onBeforeMount, onUnmounted, nextTick, watch, onMounted,ref,provide } from 'vue'; import { defineAsyncComponent, computed, reactive, onBeforeMount, onUnmounted, nextTick, watch, onMounted, ref, provide } from 'vue';
import { useRoute, useRouter } from 'vue-router'; import { useRoute, useRouter } from 'vue-router';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import { useKeepALiveNames } from '/@/stores/keepAliveNames'; import { useKeepALiveNames } from '/@/stores/keepAliveNames';
@@ -44,13 +47,13 @@ const showView = ref(true)
/** /**
* 刷新页面 * 刷新页面
*/ */
const refreshView=function () { const refreshView = function () {
showView.value = false // 通过v-if移除router-view节点 showView.value = false // 通过v-if移除router-view节点
nextTick(() => { nextTick(() => {
showView.value = true // DOM更新后再通过v-if添加router-view节点 showView.value = true // DOM更新后再通过v-if添加router-view节点
}) })
} }
provide('refreshView',refreshView) provide('refreshView', refreshView)
// 设置主界面切换动画 // 设置主界面切换动画
const setTransitionName = computed(() => { const setTransitionName = computed(() => {
@@ -105,7 +108,7 @@ onMounted(() => {
}); });
// 页面卸载时 // 页面卸载时
onUnmounted(() => { onUnmounted(() => {
mittBus.off('onTagsViewRefreshRouterView', () => {}); mittBus.off('onTagsViewRefreshRouterView', () => { });
}); });
// 监听路由变化，防止 tagsView 多标签时，切换动画消失 // 监听路由变化，防止 tagsView 多标签时，切换动画消失
// https://toscode.gitee.com/lyt-top/vue-next-admin/pulls/38/files // https://toscode.gitee.com/lyt-top/vue-next-admin/pulls/38/files