1.loading/index.vue
1 <template> 2 <div v-if="show" class="lds-spinner"> 3 <div class="spinner"> 4 <div class="double-bounce1"></div> 5 <div class="double-bounce2"></div> 6 </div> 7 </div> 8 </template> 9 <script> 10 export default { 11 name: 'Loading', 12 props: { 13 show: Boolean 14 }, 15 data() { 16 return { 17 } 18 } 19 } 20 </script> 21 <style scoped> 22 .lds-spinner{ 23 position: fixed; 24 top:0; 25 left:0; 26 width:100%; 27 height:100%; 28 } 29 .spinner { 30 width: 25px; 31 height: 25px; 32 position:absolute; 33 top:50%; 34 left:50%; 35 transform: translate(-50%); 36 37 38 } 39 .spinner .double-bounce1, .double-bounce2 { 40 width: 25px; 41 height: 25px; 42 border-radius: 50%; 43 background-color: #999999; 44 opacity: 0.6; 45 position: absolute; 46 top: 0; 47 left: 0; 48 -webkit-animation: bounce 2.0s infinite ease-in-out; 49 animation: bounce 2.0s infinite ease-in-out; 50 } 51 .spinner .double-bounce2 { 52 -webkit-animation-delay: -1.0s; 53 animation-delay: -1.0s; 54 } 55 56 57 @-webkit-keyframes bounce { 58 0%, 100% { -webkit-transform: scale(0.0) } 59 50% { -webkit-transform: scale(1.0) } 60 } 61 62 @keyframes bounce { 63 0%, 100% { 64 transform: scale(0.0); 65 -webkit-transform: scale(0.0); 66 } 50% { 67 transform: scale(1.0); 68 -webkit-transform: scale(1.0); 69 } 70 } 71 </style>
index.js
1 import Vue from 'vue' 2 import loadingComponent from '@/components/loading/index.vue' 3 4 const LoadingConstructor = Vue.extend(loadingComponent) 5 6 const instance = new LoadingConstructor({ 7 el: document.createElement('div') 8 }) 9 10 instance.show = false // 默认隐藏 11 const loading = { 12 show() { // 显示方法 13 instance.show = true 14 document.body.appendChild(instance.$el) 15 }, 16 hide() { // 隐藏方法 17 instance.show = false 18 } 19 } 20 21 export default { 22 install() { 23 if (!Vue.$loading) { 24 Vue.$loading = loading 25 } 26 Vue.mixin({ 27 created() { 28 this.$loading = Vue.$loading 29 } 30 }) 31 } 32 }
2.全局引入
1 import loading from './components/loading/index.js' 2 Vue.use(loading)
3.使用
1 this.$loading.show()//打开 2 this.$loading.hide()//关闭
