<ul class="first_class_ul list-paddingleft-2"><ul class="second_class_ul list-paddingleft-2"></ul></ul>
<h3>vue3 常見過度</h3>
<h4>1、 第一次開啟頁面時loading</h4>
<p>在頁面首次開啟的載入內容，是最容易的，透過根目錄<code>index.html</code>檔</p>
<p>在<code><div id='app'></code> 裡加入內容，就是過度內容</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><body>
<div id="app">
<h2>加载中......</h2>
</div>
<script type="module" src="/src/main.js"></script>
</body></pre><div class="contentsignin">登入後複製</div></div><p>當vue實例建立完成，透過<code>.mount()</code> 方法掛載到<code>id='app'</code> 的div 裡，會替換掉裡的<code>loading</code>內容； </p><h4>2、路由切換時、非同步元件loading</h4><ul class=" list-paddingleft-2"><li><p> 路由切換過度需要先了解一個，<code>vue3</code> 的內建元件 <code>#< Suspense></code>;</p></li><li><p><code><</code>;<code></code></p></li><li><Suspense><p> 提供 <code>2</code> 個插槽????;</p></li> <li><p><code>#default</code> : 一個要載入的內容;</p></li></ul><p><strong>##fallback</strong>: 一個載入種顯示的內容；</p><p></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><Suspense>
<template #default>
<router-view />
</template>
<template #fallback>
<h2>加载中......</h2>
</template>
</Suspense></pre><div class="contentsignin">登入後複製</div></div><h3></h3>同理：( 非同步元件的切換)<p><code><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;"><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></pre><div class="contentsignin">登入後複製</div></div></code>非同步元件也是可以使用相同的方法<code></code>添加過度動畫<code></code>新增過度動畫需要先了解</p>vue3<p> 內建元件<code><Component></code> 和<code><Transition></code> ????</p> <p><code><Component></code>: 非常簡單只有一個<strong>is</strong> 顯示這個元件，可以用來元件切換如：<code><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> <template>
<Component :is="visible ? TestComp : '' " />
</template></pre><div class="contentsignin">登入後複製</div></div></code><code><Transition> </code> : 內插入的內容</p>顯示/隱藏<p> 新增過度動畫，透過<code>name</code> 屬性來拼接</p>class<blockquote> 如:<p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> <template>
<transition name='anime'>
<TestComp v-if='visblte' />
</transition>
</template></pre><div class="contentsignin">登入後複製</div></div><code>設定樣式透過</code>name<strong> 屬性這裡</strong><br/><code></code>anime-enter-active<strong>#: 過度態( 設定</strong>隱藏=> 顯示<br/> 過度的時間等參數)<br/><code>anime-leave-active</code>: 過度態( 設定<code>顯示=> 隱藏</code> 過度的時間等參數)<strong></strong><br/>anime-enter -from<code> => </code>anime-enter-to<code> </code>隱藏=> 顯示<strong> 開始與結束的樣式</strong></p>anime-leave-from</blockquote># = > <p>anime-leave-to</p> ###顯示=> 隱藏### 開始和結束的樣式#########組合????##<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;"><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></pre><div class="contentsignin">登入後複製</div></div>
以上是vue3怎麼解決各場景loading過度的詳細內容。更多資訊請關注PHP中文網其他相關文章！
