首頁 > 文章 > web前端 > vue3怎麼解決各場景loading過度

vue3怎麼解決各場景loading過度

WBOY轉載: 2023-05-18 15:25:061846瀏覽

vue3 常見過度

1、第一次開啟頁面時loading

在頁面首次開啟的載入內容，是最容易的，透過根目錄index.html檔

在43385b86c17e4e8e6ef603bd5efdffc9 裡加入內容，就是過度內容

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

當vue實例建立完成，透過.mount() 方法掛載到id='app' 的div 裡，會替換掉裡的loading內容；

2、路由切換時、非同步元件loading

路由切換過度需要先了解一個，vue3 的內建元件 #b7d391b0a8e9eea5e525c473b7ead7d2;
cd8f95828a036a4c6af53592a2bc8053<p> 提供 <code>2 個插槽????;
#default : 一個要載入的內容;

##fallback: 一個載入種顯示的內容；

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

同理：( 非同步元件的切換)

<pre class="brush:js;"><template> <Suspense> <template #default> <AsyncComp v-if = &#39;vitblie&#39; /> </template> <template #fallback> <h2>加载中......</h2> </template> </Suspense> <button @click=&#39;open&#39;> 切换 </button> </template> <script setup> import { defineAsyncComponent , ref } from &#39;vue&#39;; const asyncComp = defineAsyncComponent(()=>important(&#39;./asyncComp.vue)); const vitblie = ref(false); function open(){ vitblie.value = !vitblie.value; } </script></pre>非同步元件也是可以使用相同的方法添加過度動畫新增過度動畫需要先了解

內建元件9366e37985177da7839522e36133b6c8 和87a2e53b90599db3250d06933523db3b ????

9366e37985177da7839522e36133b6c8: 非常簡單只有一個is 顯示這個元件，可以用來元件切換如：<pre class="brush:php;toolbar:false"> <template> <Component :is="visible ? TestComp : &#39;&#39; " /> </template></pre>87a2e53b90599db3250d06933523db3b : 內插入的內容

顯示/隱藏

新增過度動畫，透過name 屬性來拼接

class

如:
 <template>
 	<transition name=&#39;anime&#39;>
 		<TestComp v-if=&#39;visblte&#39; /> 
 	</transition>
 </template>
設定樣式透過name 屬性這裡
anime-enter-active#: 過度態( 設定隱藏=> 顯示
過度的時間等參數)
anime-leave-active: 過度態( 設定顯示=> 隱藏 過度的時間等參數)
anime-enter -from => anime-enter-to 隱藏=> 顯示 開始與結束的樣式
anime-leave-from

# = >

anime-leave-to

###顯示=> 隱藏### 開始和結束的樣式#########組合????##

<template>
	<router-view v-slot={ Component } >
		<transition name=&#39;anime&#39;>
			<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>

以上是vue3怎麼解決各場景loading過度的詳細內容。更多資訊請關注PHP中文網其他相關文章！

html class default 异步 transition

陳述：

本文轉載於：yisu.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：vue3和ts封裝axios及使用mock.js的方法是什麼下一篇：vue3和ts封裝axios及使用mock.js的方法是什麼

看更多

vue3怎麼解決各場景loading過度

vue3 常見過度

1、 第一次開啟頁面時loading

2、路由切換時、非同步元件loading

相關文章

1、第一次開啟頁面時loading