vue如何使用element组件自定义v-loading

伯斌

目录

• 使用element组定义v-loading
  
  
  
  • 文件夹目录
    
  • loading.vue (这是核心文件也就是在页面怎么展示效果的v-loading)
    
  • 效果图片
    
  
  
• 总结
  

使用element组定义v-loading


文件夹目录

src文件夹下面的directive.js

1. import Vue from 'vue';
   
2. import Loading from './loading.vue';
   
3. import { addClass, removeClass, getStyle } from 'element-ui/src/utils/dom';
   
4. import { PopupManager } from 'element-ui/src/utils/popup';
   
5. import afterLeave from 'element-ui/src/utils/after-leave';
   
6. const Mask = Vue.extend(Loading);
   
7. // Mask 是一个虚拟DOM
   
8. const loadingDirective = {};
   
9. loadingDirective.install = Vue => {
   
10.   if (Vue.prototype.$isServer) return;
    
11.   const toggleLoading = (el, binding) => {
    
12.     if (binding.value) {
    
13.       Vue.nextTick(() => {
    
14.         if (binding.modifiers.fullscreen) {
    
15.           el.originalPosition = getStyle(document.body, 'position');
    
16.           el.originalOverflow = getStyle(document.body, 'overflow');
    
17.           el.maskStyle.zIndex = PopupManager.nextZIndex();
    
18. 
    
19.           addClass(el.mask, 'is-fullscreen');
    
20.           insertDom(document.body, el, binding);
    
21.         } else {
    
22.           removeClass(el.mask, 'is-fullscreen');
    
23. 
    
24.           if (binding.modifiers.body) {
    
25.             el.originalPosition = getStyle(document.body, 'position');
    
26. 
    
27.             ['top', 'left'].forEach(property => {
    
28.               const scroll = property === 'top' ? 'scrollTop' : 'scrollLeft';
    
29.               el.maskStyle[property] = el.getBoundingClientRect()[property] +
    
30.                 document.body[scroll] +
    
31.                 document.documentElement[scroll] -
    
32.                 parseInt(getStyle(document.body, `margin-${ property }`), 10) +
    
33.                 'px';
    
34.             });
    
35.             ['height', 'width'].forEach(property => {
    
36.               el.maskStyle[property] = el.getBoundingClientRect()[property] + 'px';
    
37.             });
    
38. 
    
39.             insertDom(document.body, el, binding);
    
40.           } else {
    
41.             el.originalPosition = getStyle(el, 'position');
    
42.             insertDom(el, el, binding);
    
43.           }
    
44.         }
    
45.       });
    
46.     } else {
    
47.       afterLeave(el.instance, () => {
    
48.         if (!el.instance.hiding) return;
    
49.         el.domVisible = false;
    
50.         const target = binding.modifiers.fullscreen || binding.modifiers.body
    
51.           ? document.body
    
52.           : el;
    
53.         removeClass(target, 'el-loading-parent--relative');
    
54.         removeClass(target, 'el-loading-parent--hidden');
    
55.         el.instance.hiding = false;
    
56.       }, 300, true);
    
57.       el.instance.visible = false;
    
58.       el.instance.hiding = true;
    
59.     }
    
60.   };
    
61.   const insertDom = (parent, el, binding) => {
    
62.     if (!el.domVisible && getStyle(el, 'display') !== 'none' && getStyle(el, 'visibility') !== 'hidden') {
    
63.       Object.keys(el.maskStyle).forEach(property => {
    
64.         el.mask.style[property] = el.maskStyle[property];
    
65.       });
    
66. 
    
67.       if (el.originalPosition !== 'absolute' && el.originalPosition !== 'fixed') {
    
68.         addClass(parent, 'el-loading-parent--relative');
    
69.       }
    
70.       if (binding.modifiers.fullscreen && binding.modifiers.lock) {
    
71.         addClass(parent, 'el-loading-parent--hidden');
    
72.       }
    
73.       el.domVisible = true;
    
74. 
    
75.       parent.appendChild(el.mask);
    
76.       Vue.nextTick(() => {
    
77.         if (el.instance.hiding) {
    
78.           el.instance.$emit('after-leave');
    
79.         } else {
    
80.           el.instance.visible = true;
    
81.         }
    
82.       });
    
83.       el.domInserted = true;
    
84.     } else if (el.domVisible && el.instance.hiding === true) {
    
85.       el.instance.visible = true;
    
86.       el.instance.hiding = false;
    
87.     }
    
88.   };
    
89.   Vue.directive('loading', { // 自定义全局指令
    
90.     bind: function(el, binding, vnode) {
    
91.       const textExr = el.getAttribute('element-loading-text');
    
92.       const spinnerExr = el.getAttribute('element-loading-spinner');
    
93.       const backgroundExr = el.getAttribute('element-loading-background');
    
94.       const customClassExr = el.getAttribute('element-loading-custom-class');
    
95.       const vm = vnode.context;
    
96.       const mask = new Mask({
    
97.         el: document.createElement('div'),
    
98.         data: {
    
99.           text: vm && vm[textExr] || textExr,
    
100.           spinner: vm && vm[spinnerExr] || spinnerExr,
     
101.           background: vm && vm[backgroundExr] || backgroundExr,
     
102.           customClass: vm && vm[customClassExr] || customClassExr,
     
103.           fullscreen: !!binding.modifiers.fullscreen
     
104.         }
     
105.       });
     
106.       el.instance = mask;
     
107.       el.mask = mask.$el;
     
108.       el.maskStyle = {};
     
109. 
     
110.       binding.value && toggleLoading(el, binding);
     
111.     },
     
112.     update: function(el, binding) {
     
113.       el.instance.setText(el.getAttribute('element-loading-text'));
     
114.       if (binding.oldValue !== binding.value) {
     
115.         toggleLoading(el, binding);
     
116.       }
     
117.     },
     
118.     unbind: function(el, binding) {
     
119.       if (el.domInserted) {
     
120.         el.mask &&
     
121.         el.mask.parentNode &&
     
122.         el.mask.parentNode.removeChild(el.mask);
     
123.         toggleLoading(el, { value: false, modifiers: binding.modifiers });
     
124.       }
     
125.       el.instance && el.instance.$destroy();
     
126.     }
     
127.   });
     
128. };
     
129. 
     
130. export default loadingDirective;

复制代码

index.js

1. import Vue from 'vue';
   
2. import loadingVue from './loading.vue';
   
3. import { addClass, removeClass, getStyle } from 'element-ui/src/utils/dom';
   
4. import { PopupManager } from 'element-ui/src/utils/popup';
   
5. import afterLeave from 'element-ui/src/utils/after-leave';
   
6. import merge from 'element-ui/src/utils/merge';
   
7. 
   
8. const LoadingConstructor = Vue.extend(loadingVue);
   
9. 
   
10. const defaults = {
    
11.   text: null,
    
12.   fullscreen: true,
    
13.   body: false,
    
14.   lock: false,
    
15.   customClass: ''
    
16. };
    
17. 
    
18. let fullscreenLoading;
    
19. 
    
20. LoadingConstructor.prototype.originalPosition = '';
    
21. LoadingConstructor.prototype.originalOverflow = '';
    
22. 
    
23. LoadingConstructor.prototype.close = function() {
    
24.   if (this.fullscreen) {
    
25.     fullscreenLoading = undefined;
    
26.   }
    
27.   afterLeave(this, () => {
    
28.     const target = this.fullscreen || this.body
    
29.       ? document.body
    
30.       : this.target;
    
31.     removeClass(target, 'el-loading-parent--relative');
    
32.     removeClass(target, 'el-loading-parent--hidden');
    
33.     if (this.$el && this.$el.parentNode) {
    
34.       this.$el.parentNode.removeChild(this.$el);
    
35.     }
    
36.     this.$destroy();
    
37.   }, 300);
    
38.   this.visible = false;
    
39. };
    
40. 
    
41. const addStyle = (options, parent, instance) => {
    
42.   let maskStyle = {};
    
43.   if (options.fullscreen) {
    
44.     instance.originalPosition = getStyle(document.body, 'position');
    
45.     instance.originalOverflow = getStyle(document.body, 'overflow');
    
46.     maskStyle.zIndex = PopupManager.nextZIndex();
    
47.   } else if (options.body) {
    
48.     instance.originalPosition = getStyle(document.body, 'position');
    
49.     ['top', 'left'].forEach(property => {
    
50.       let scroll = property === 'top' ? 'scrollTop' : 'scrollLeft';
    
51.       maskStyle[property] = options.target.getBoundingClientRect()[property] +
    
52.         document.body[scroll] +
    
53.         document.documentElement[scroll] +
    
54.         'px';
    
55.     });
    
56.     ['height', 'width'].forEach(property => {
    
57.       maskStyle[property] = options.target.getBoundingClientRect()[property] + 'px';
    
58.     });
    
59.   } else {
    
60.     instance.originalPosition = getStyle(parent, 'position');
    
61.   }
    
62.   Object.keys(maskStyle).forEach(property => {
    
63.     instance.$el.style[property] = maskStyle[property];
    
64.   });
    
65. };
    
66. const Loading = (options = {}) => {
    
67.   if (Vue.prototype.$isServer) return;
    
68.   options = merge({}, defaults, options);
    
69.   if (typeof options.target === 'string') {
    
70.     options.target = document.querySelector(options.target);
    
71.   }
    
72.   options.target = options.target || document.body;
    
73.   if (options.target !== document.body) {
    
74.     options.fullscreen = false;
    
75.   } else {
    
76.     options.body = true;
    
77.   }
    
78.   if (options.fullscreen && fullscreenLoading) {
    
79.     return fullscreenLoading;
    
80.   }
    
81. 
    
82.   let parent = options.body ? document.body : options.target;
    
83.   let instance = new LoadingConstructor({
    
84.     el: document.createElement('div'),
    
85.     data: options
    
86.   });
    
87.   addStyle(options, parent, instance);
    
88.   if (instance.originalPosition !== 'absolute' && instance.originalPosition !== 'fixed') {
    
89.     addClass(parent, 'el-loading-parent--relative');
    
90.   }
    
91.   if (options.fullscreen && options.lock) {
    
92.     addClass(parent, 'el-loading-parent--hidden');
    
93.   }
    
94.   parent.appendChild(instance.$el);
    
95.   Vue.nextTick(() => {
    
96.     instance.visible = true;
    
97.   });
    
98.   if (options.fullscreen) {
    
99.     fullscreenLoading = instance;
    
100.   }
     
101.   return instance;
     
102. };
     
103. export default Loading;

复制代码

loading.vue (这是核心文件也就是在页面怎么展示效果的v-loading)

1. <template>
   
2.   <div class="loading-index">
   
3.     <transition name="el-loading-fade" @after-leave="handleAfterLeave">
   
4.       <div
   
5.         v-show="visible"
   
6.         class="el-loading-mask"
   
7.         :style="{ backgroundColor: background || '' }"
   
8.         :class="[customClass, { 'is-fullscreen': fullscreen }]"
   
9.       >
   
10.         <div class="el-loading-spinner">
    
11.           <!-- <svg v-if="!spinner" class="circular" viewBox="25 25 50 50">
    
12.           <circle class="path" cx="50" cy="50" r="20" fill="none"/>
    
13.         </svg>
    
14.         <i v-else :class="spinner"></i>
    
15.         <p v-if="text" class="el-loading-text">{{ text }}</p> -->
    
16.           <div class="number">
    
17.             <span
    
18.               v-for="(item, index) in 'loading...'"
    
19.               :style="
    
20.                 'animation: totop 1.5s ' + 0.1 * index + 's infinite ease-out'
    
21.               "
    
22.               :key="index"
    
23.             >
    
24.               {{ item }}
    
25.             </span>
    
26.           </div>
    
27.         </div>
    
28.       </div>
    
29.     </transition>
    
30.   </div>
    
31. </template>

复制代码

1. <script>
   
2. export default {
   
3.   data() {
   
4.     return {
   
5.       text: null,
   
6.       spinner: null,
   
7.       background: null,
   
8.       fullscreen: true,
   
9.       visible: false,
   
10.       customClass: "",
    
11.     };
    
12.   },
    
13. 
    
14.   methods: {
    
15.     handleAfterLeave() {
    
16.       this.$emit("after-leave");
    
17.     },
    
18.     setText(text) {
    
19.       this.text = text;
    
20.     },
    
21.   },
    
22. };
    
23. </script>

复制代码

1. <style lang="less">
   
2. .loading-index {
   
3.   .number {
   
4.     line-height: 250px;
   
5.     font-size: 24px;
   
6.     color: #000;
   
7.     text-align: center;
   
8.     span {
   
9.       position: relative;
   
10.       margin-right: -6px;
    
11.     }
    
12.   }
    
13.   @keyframes totop {
    
14.     0% {
    
15.       top: 0;
    
16.     }
    
17.     24% {
    
18.       top: 0;
    
19.     }
    
20.     33% {
    
21.       top: -7px;
    
22.     }
    
23.     39% {
    
24.       top: -7px;
    
25.     }
    
26.     45% {
    
27.       top: 0;
    
28.     }
    
29.     100% {
    
30.       top: 0;
    
31.     }
    
32.   }
    
33. }
    
34. </style>

复制代码

在跟loading文件夹建立index.js(一定要跟src同级)

1. import directive from './src/directive';
   
2. import service from './src/index';
   
3. export default {
   
4.   install(Vue) {
   
5.     Vue.use(directive);
   
6.     Vue.prototype.$loading = service;
   
7.   },
   
8.   directive,
   
9.   service
   
10. };

复制代码

在main.js中引入
注意：一定要注意先后顺序，否责无法实现

效果图片

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持晓枫资讯。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

慕容涵韵

顶顶更健康！！！

谷梁柔妙

感谢楼主，顶。

宁静淑

感谢楼主分享。