vue3如何解決各場景l(fā)oading過度(避免白屏尷尬!)

更新時間：2023年03月27日 11:42:51 作者：野生切圖仔

在開發(fā)的過程中點擊提交按鈕,或者是一些其它場景總會遇到loading加載,下面這篇文章主要給大家介紹了關(guān)于vue3如何解決各場景l(fā)oading過度的相關(guān)資料,避免白屏尷尬,需要的朋友可以參考下

Ⅰ、前言

當(dāng)我們每次打卡頁面，切換路由，甚至于異步組件，都會有一個等待的時間；

為了不白屏，提高用戶體驗，添加一個 loading 過度動畫是非常常見的；

那么這幾種場景我們應(yīng)該把 loading 加在哪里呢？

Ⅱ、vue3 常見過度

針對以下 3 種情況做了一下整理 ??

① 首次打開頁面時；
② 路由切換時；
③ 異步組件顯示時；

1、首次打開頁面時 loading

在頁面首次打開的加載內(nèi)容，是最容易的，通過根目錄 index.html文件

在 <div id='app'> 里添加內(nèi)容，就是過度內(nèi)容

<body>
   <div id="app">
      <h1>加載中......</h1>
   </div>
   <script type="module" src="/src/main.js"></script>
</body>

當(dāng)vue實例創(chuàng)建完成，通過.mount() 方法掛載到 id='app' 的div 里，會替換掉里的loading內(nèi)容；

2、路由切換時、異步組件 loading

路由切換過度需要先了解一個，vue3 的內(nèi)置組件 <Suspense>；
<Suspense> 提供 2 個插槽 ??；
#default : 一個要加載的內(nèi)容；
#fallback: 一個加載種顯示的內(nèi)容；

<Suspense>
	<template #default>
		<router-view />
	</template>
	<template #fallback>
		<h1>加載中......</h1>
	</template>
</Suspense>

同理：( 異步組件的切換 )

<template>
	<Suspense>
		<template #default>
			<AsyncComp  v-if = 'vitblie' />
		</template>
		<template #fallback>
			<h1>加載中......</h1>
		</template>
	</Suspense>
	
	<button @click='open'> 切換 </button>
</template>
<script setup>
	import { defineAsyncComponent , ref } from 'vue';
	const asyncComp = defineAsyncComponent(()=>important('./asyncComp.vue));

	const vitblie = ref(false);
	function open(){
		vitblie.value = !vitblie.value;
	}
</script>

異步組件也是可以使用相同的方法

Ⅲ、添加過度動畫

添加過度動畫需要先了解 vue3 內(nèi)置組件 <Component> 和 <Transition> ??

<Component>: 非常簡單只有一個 is 顯示該組件，可以用來組件切換如：

 <template>
 	<Component :is="visible ? TestComp : '' " /> 
 </template>

<Transition> : 里插入的內(nèi)容 顯示/隱藏 添加過度動畫，通過 name 屬性來拼接 class 如 :

 <template>
 	<transition name='anime'>
 		<TestComp v-if='visblte' /> 
 	</transition>
 </template>

設(shè)置樣式通過 name 屬性這里

anime-enter-active: 過度態(tài) ( 設(shè)置 隱藏 => 顯示 過度的時間等參數(shù))
anime-leave-active: 過度態(tài) ( 設(shè)置 顯示 => 隱藏 過度的時間等參數(shù))

anime-enter-from => anime-enter-to 隱藏 => 顯示 開始和結(jié)束的樣式
anime-leave-from => anime-leave-to 顯示 => 隱藏 開始和結(jié)束的樣式

組合起來 ??

<template>
	<router-view v-slot={ Component } >
		<transition name='anime'>
			<component :is="Component" />
		<transition>
	</router-view>
<template>
<style scoped>
.anime-enter-active,
.anime-leave-active {
	transition: all 1s;
}
.anime-leave-from { transform: translateY(0); }
.anime-leave-to { transform: translateY(-100%); }

.anime-enter-from { transform: translateY(100%); }
.anime-enter-to { transform: translate(0); }
</style>