vue3怎么解決各場(chǎng)景l(fā)oading過(guò)度

發(fā)布時(shí)間：2023-03-27 13:51:09 來(lái)源：億速云閱讀：149 作者：iii 欄目：開(kāi)發(fā)技術(shù)

這篇文章主要介紹“vue3怎么解決各場(chǎng)景l(fā)oading過(guò)度”的相關(guān)知識(shí)，小編通過(guò)實(shí)際案例向大家展示操作過(guò)程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“vue3怎么解決各場(chǎng)景l(fā)oading過(guò)度”文章能幫助大家解決問(wèn)題。

vue3 常見(jiàn)過(guò)度

1、首次打開(kāi)頁(yè)面時(shí) loading

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

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

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

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

2、路由切換時(shí)、異步組件 loading

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

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

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

<template>
	<Suspense>
		<template #default>
			<AsyncComp  v-if = 'vitblie' />
		</template>
		<template #fallback>
			<h2>加載中......</h2>
		</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>

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

添加過(guò)度動(dòng)畫(huà)

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

<Component>: 非常簡(jiǎn)單只有一個(gè) is 顯示該組件，可以用來(lái)組件切換如：

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

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

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

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

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

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

組合起來(lái) ????

<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>

關(guān)于“vue3怎么解決各場(chǎng)景l(fā)oading過(guò)度”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。

向AI問(wèn)一下細(xì)節(jié)

vue3怎么解決各場(chǎng)景l(fā)oading過(guò)度

vue3 常見(jiàn)過(guò)度

1、 首次打開(kāi)頁(yè)面時(shí) loading

2、 路由切換時(shí)、異步組件 loading

添加過(guò)度動(dòng)畫(huà)

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽

1、首次打開(kāi)頁(yè)面時(shí) loading

2、路由切換時(shí)、異步組件 loading