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)