vue之loading · 前端技術總結

loading這里寫了3種效果 1. 全局loading 2. aside loading 3. dialog loading 演示 ![](https://box.kancloud.cn/64fad17fc1a6923d10c782db7ea444d7_704x600.gif) 代碼 ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>loading</title> <script type="text/javascript" src="vue.min.js"></script> <style> .zh-loading{width:100px;height:100px;position:relative;margin:0 auto;} .zh-loading span{display:inline-block;width:16px;height:16px;border-radius:50%;background:#90ee90;position:absolute;-webkit-animation:load 1.04s ease infinite} @-webkit-keyframes load{0%{-webkit-transform:scale(1.2);opacity:1} 100%{-webkit-transform:scale(.3);opacity:.5} } .zh-loading span:nth-child(1){left:0;top:50%;margin-top:-10px;-webkit-animation-delay:.13s} .zh-loading span:nth-child(2){left:14px;top:14px;-webkit-animation-delay:.26s} .zh-loading span:nth-child(3){left:50%;top:0;margin-left:-10px;-webkit-animation-delay:.39s} .zh-loading span:nth-child(4){top:14px;right:14px;-webkit-animation-delay:.52s} .zh-loading span:nth-child(5){right:0;top:50%;margin-top:-10px;-webkit-animation-delay:.65s} .zh-loading span:nth-child(6){right:14px;bottom:14px;-webkit-animation-delay:.78s} .zh-loading span:nth-child(7){bottom:0;left:50%;margin-left:-10px;-webkit-animation-delay:.91s} .zh-loading span:nth-child(8){bottom:14px;left:14px;-webkit-animation-delay:1.04s} .zh-loading-box{position: absolute;z-index: 999;left: 0;top: 0;height: 100%;width: 100%;background: rgba(0,0,0,0.1);} .zh-loading-box .zh-loading-inner{position: absolute;z-index: 2;left: 50%;top: 50%;-webkit-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%);} .zh-loading-box .zh-loading-inner p{color: #666;text-align: center;} .fade-enter-active, .fade-leave-active{-webkit-transition: opacity .5s;transition: opacity .5s;} .fade-enter, .fade-leave-to{opacity: 0;} </style> </head> <body> <div id="app">  <loading ref="global" v-show="loading.global" v-bind:style="[style.global]"></loading> <button v-bind:style="[style.btn]" type="button" v-on:click="globalLoading">顯示全局loading</button>  <div v-bind:style="[style.aside]"> <loading v-show="loading.aside"></loading> </div> <button v-bind:style="[style.btn]" type="button" v-on:click="asideLoading">顯示aside loading</button>  <transition name="fade"> <div v-show="loading.dialog" v-bind:style="[style.dialog]"> <loading></loading> </div> </transition> <button v-bind:style="[style.btn]" type="button" v-on:click="dialogLoading">顯示dialog loading</button> </div>  <script type="text/x-template" id="loading"> <div class="zh-loading-box"> <div class="zh-loading-inner"> <div class="zh-loading"> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </div> <p>{{ text }}</p> </div> </div> </script> <script> // 變量 var timeout = null; // 組件 Vue.component('loading', { template: '#loading', data: function() { return { text: '正在加載...' } } }); // 實例 var app = new Vue({ el: '#app', data: { loading: { global: false, aside: false, dialog: false }, style: { global: { position: 'fixed' }, btn: { position: 'relative', zIndex: 1000 }, aside: { position: 'relative', float: 'right', width: '300px', height: '600px', backgroundColor: '#eee', boxShadow: '0 0 5px rgba(0,0,0,0.3)' }, dialog: { position: 'fixed', zIndex: 999, left: '50%', top: '50%', width: '500px', height: '500px', backgroundColor: '#ccc', border: '1px solid #aaa', boxShadow: '0 0 10px rgba(0,0,0,0.3)', transform: 'translate(-50%,-50%)' } } }, methods: { globalLoading: function(e) { if(/^顯示/.test(e.target.innerText)) { e.target.innerText = '隱藏全局loading'; this.style.global.position = 'fixed'; } else { e.target.innerText = '顯示全局loading'; this.style.global.position = 'absolute'; this.$refs.global.text = '正在加載...'; } this.loading.global = !this.loading.global; if(timeout) { clearTimeout(timeout); timeout = null; } timeout = setTimeout(function() { this.$refs.global.text = '==== 加載完成 ===='; }.bind(this), 1000); }, asideLoading: function(e) { if(/^顯示/.test(e.target.innerText)) { e.target.innerText = '隱藏aside loading'; } else { e.target.innerText = '顯示aside loading'; } this.loading.aside = !this.loading.aside; }, dialogLoading: function(e) { if(/^顯示/.test(e.target.innerText)) { e.target.innerText = '隱藏dialog loading'; } else { e.target.innerText = '顯示dialog loading'; } this.loading.dialog = !this.loading.dialog; } } }); </script> </body> </html> ~~~ dialog的過渡效果使用了transition內置組件，但個人覺得還是自己寫個class來的方便，可能是不習慣吧。。這里感覺使用組件的好處是，頁面標簽更少了，結構也不較清晰，組件復用也很方便。。 ![](https://box.kancloud.cn/2e1b3c324667289136926549520cc7f8_123x157.jpg)