Vue-封装loading

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()//关闭