溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“vue3怎么解決各場景loading過度”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“vue3怎么解決各場景loading過度”文章能幫助大家解決問題。
在頁面首次打開的加載內容，是最容易的，通過根目錄 index.html文件
在 <div id='app'> 里添加內容，就是過度內容
<body> <div id="app"> <h2>加載中......</h2> </div> <script type="module" src="/src/main.js"></script> </body>
當vue實例創建完成，通過.mount() 方法掛載到 id='app' 的div 里，會替換掉里的loading內容；
路由切換過度 需要先了解一個，vue3 的內置組件 <Suspense>；
<Suspense> 提供 2 個插槽 ????；
#default : 一個要加載的內容 ；
#fallback: 一個加載種顯示的內容；
<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>異步組件也是可以使用相同的方法
添加過度動畫需要先了解 vue3 內置組件 <Component> 和 <Transition> ????
<Component>: 非常簡單只有一個 is 顯示該組件， 可以用來組件切換 如：
<template> <Component :is="visible ? TestComp : '' " /> </template>
<Transition> : 里插入的內容 顯示/隱藏 添加過度動畫 ，通過 name 屬性來拼接 class 如 :
<template> <transition name='anime'> <TestComp v-if='visblte' /> </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='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>關于“vue3怎么解決各場景loading過度”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
