[TOC] #### Css3 Loading 組件 1. 根目錄新建base文件夾 創建 Loading 組件 ~~~ <template> <div class="loader"></div> </template> <script> export default { name : 'Loading' } </script> <style scoped> .loader { position: relative; width: 2.5em; height: 2.5em; transform: rotate(165deg); } .loader:before, .loader:after { content: ''; position: absolute; top: 50%; left: 50%; display: block; width: 0.5em; height: 0.5em; border-radius: 0.25em; transform: translate(-50%, -50%); } .loader:before { animation: before 2s infinite; } .loader:after { animation: after 2s infinite; } @keyframes before { 0% { width: 0.5em; box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75); } 35% { width: 2.5em; box-shadow: 0 -0.5em rgba(225, 20, 98, 0.75), 0 0.5em rgba(111, 202, 220, 0.75); } 70% { width: 0.5em; box-shadow: -1em -0.5em rgba(225, 20, 98, 0.75), 1em 0.5em rgba(111, 202, 220, 0.75); } 100% { box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75); } } @keyframes after { 0% { height: 0.5em; box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75), -0.5em -1em rgba(233, 169, 32, 0.75); } 35% { height: 2.5em; box-shadow: 0.5em 0 rgba(61, 184, 143, 0.75), -0.5em 0 rgba(233, 169, 32, 0.75); } 70% { height: 0.5em; box-shadow: 0.5em -1em rgba(61, 184, 143, 0.75), -0.5em 1em rgba(233, 169, 32, 0.75); } 100% { box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75), -0.5em -1em rgba(233, 169, 32, 0.75); } } /** * Attempt to center the whole thing! */ html, body { height: 100%; } .loader { position: absolute; top: calc(50% - 1.25em); left: calc(50% - 1.25em); } </style> ~~~ ***** 2. man.js 中全局注冊 ~~~ import Vue from 'vue' import './plugins/axios' import App from './App.vue' import router from './router' import Axios from 'axios'; // import store from './store' Vue.prototype.$http = Axios Vue.config.productionTip = false Vue.filter('FilterImg',function(url, value) { return url.replace(/w\.h/, value) }) // 全局注冊 Loading 組件 import Loading from '../base/Loading' Vue.component('Loading', Loading) new Vue({ router, render: h => h(App) }).$mount('#app') ~~~ ***** 3. 組件中引用 ~~~ <template> <div class="movie_body" ref="movie_body"> // Loading 未獲取數據前顯示 <Loading v-if="isLoading" /> // 獲取數據后，Loading消失 <ul v-else> <li v-if="RefreshMessage.length > 0">{{RefreshMessage}}</li> <li v-for="item in movieList"> <div class="pic_show"> <img :src="item.img | FilterImg('128.180')"> </div> <div class="info_list"> <h2>{{ item.nm }}</h2> <p> <span class="person">{{item.wish}}</span> 人想看 </p> <p>主演: {{item.star}}</p> <p> {{item.rt}} 上映</p> </div> <div class="btn_pre">預售</div> </li> </ul> </div> </template> ~~~ ~~~ export default { name: "Coming", data() { return { movieList: [], RefreshMessage: '', // Loading 默認顯示 isLoading: true } }, mounted() { this.$http('/api/movieOnInfoList?cityId=10').then(res => { if (res.data.msg === 'ok') { this.movieList = res.data.data.movieList // 數據請求成功后，Loading 消失 this.isLoading = false ~~~