devbox
AllinToyou
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Vue Loading插件_vue.prototype.$loading

作者：AllinToyou | 2024-03-11 11:44:20

赞

踩

vue.prototype.$loading

图片描述

基于vue全家桶

目录结构

  1. ├── components
  2. │   ├── Loading
  3. │   ├── ├── index.js
  4. │   └── └── index.css
  5. └── main.js

components/Loading/index.js

  1.  /*
  2.     自定义 loading 组件
  3.     调用
  4.     this.$loading('正在加载中...');
  5.     this.$loading.close();
  6. */ 
  7.  let _LOADING = {
  8.         show: false,     // Boolean loading显示状态
  9.         component: null  // Object loading组件
  10.      };    
  11. export default {
  12.     install(Vue) {
  13.         /*
  14.             text: String
  15.             type: String
  16.         */
  17.         Vue.prototype.$loading = function(text='正在加载中...', type) {
  18.             if (type == 'close') {
  19.                 _LOADING.component.show = _LOADING.show = false;
  20.             } else {
  21.                 if (_LOADING.show) {
  22.                     return;
  23.                 }
  24.                 let LoadingCompoent = Vue.extend({
  25.                     data: function() {
  26.                         return {
  27.                             show: _LOADING.show
  28.                         }
  29.                     },
  30.                     template: `<div v-show="show" class="zh-load-mark">
  31.                                     <div class="zh-load-box">
  32.                                         <div class="zh-loading">
  33.                                             <div class="loading_leaf loading_leaf_0"></div>
  34.                                             <div class="loading_leaf loading_leaf_1"></div>
  35.                                             <div class="loading_leaf loading_leaf_2"></div>
  36.                                             <div class="loading_leaf loading_leaf_3"></div>
  37.                                             <div class="loading_leaf loading_leaf_4"></div>
  38.                                             <div class="loading_leaf loading_leaf_5"></div>
  39.                                             <div class="loading_leaf loading_leaf_6"></div>
  40.                                             <div class="loading_leaf loading_leaf_7"></div>
  41.                                             <div class="loading_leaf loading_leaf_8"></div>
  42.                                             <div class="loading_leaf loading_leaf_9"></div>
  43.                                             <div class="loading_leaf loading_leaf_10"></div>
  44.                                             <div class="loading_leaf loading_leaf_11"></div>
  45.                                         </div>
  46.                                         <div class="zh-load-content">${text}</div>
  47.                                     </div>
  48.                                 </div>`
  49.                 });
  50.                 _LOADING.component = new LoadingCompoent();
  51.                 let element = _LOADING.component.$mount().$el;
  52.                 document.body.appendChild(element);
  53.                 _LOADING.component.show = _LOADING.show = true;
  54.             }
  55.         };
  56.         // 打开/关闭
  57.         ['open', 'close'].forEach(function(type) {
  58.             Vue.prototype.$loading[type] = function(text) {
  59.                 return Vue.prototype.$loading(text, type);
  60.             }
  61.         });
  62.     }
  63. }

components/Loading/index.css

  1. .zh-load-mark {
  2.     position: fixed;
  3.     left: 0;
  4.     top: 0;
  5.     width: 100%;
  6.     height: 100%;
  7.     z-index: 9999;
  8. }
  9. .zh-load-box {
  10.     position: fixed;
  11.     z-index: 3;
  12.     width: 7.6em;
  13.     min-height: 7.6em;
  14.     top: 180px;
  15.     left: 50%;
  16.     margin-left: -3.8em;
  17.     background: rgba(0, 0, 0, 0.7);
  18.     text-align: center;
  19.     border-radius: 5px;
  20.     color: #FFFFFF;
  21. }
  22. .zh-load-content {
  23.     margin-top: 64%;
  24.     font-size: 14px;
  25. }
  26. .zh-loading {
  27.     position: absolute;
  28.     width: 0px;
  29.     left: 50%;
  30.     top: 38%;
  31. }
  32. .loading_leaf {
  33.     position: absolute;
  34.     top: -1px;
  35.     opacity: 0.25;
  36. }
  37. .loading_leaf:before {
  38.     content: " ";
  39.     position: absolute;
  40.     width: 9.14px;
  41.     height: 3.08px;
  42.     background: #d1d1d5;
  43.     box-shadow: rgba(0, 0, 0, 0.0980392) 0px 0px 1px;
  44.     border-radius: 1px;
  45.     -webkit-transform-origin: left 50% 0px;
  46.     transform-origin: left 50% 0px;
  47. }
  48. .loading_leaf_0 {
  49.     -webkit-animation: opacity-0 1.25s linear infinite;
  50.     animation: opacity-0 1.25s linear infinite;
  51. }
  52. .loading_leaf_0:before {
  53.     -webkit-transform: rotate(0deg) translate(7.92px, 0px);
  54.     transform: rotate(0deg) translate(7.92px, 0px);
  55. }
  56. .loading_leaf_1 {
  57.     -webkit-animation: opacity-1 1.25s linear infinite;
  58.     animation: opacity-1 1.25s linear infinite;
  59. }
  60. .loading_leaf_1:before {
  61.     -webkit-transform: rotate(30deg) translate(7.92px, 0px);
  62.     transform: rotate(30deg) translate(7.92px, 0px);
  63. }
  64. .loading_leaf_2 {
  65.     -webkit-animation: opacity-2 1.25s linear infinite;
  66.     animation: opacity-2 1.25s linear infinite;
  67. }
  68. .loading_leaf_2:before {
  69.     -webkit-transform: rotate(60deg) translate(7.92px, 0px);
  70.     transform: rotate(60deg) translate(7.92px, 0px);
  71. }
  72. .loading_leaf_3 {
  73.     -webkit-animation: opacity-3 1.25s linear infinite;
  74.     animation: opacity-3 1.25s linear infinite;
  75. }
  76. .loading_leaf_3:before {
  77.     -webkit-transform: rotate(90deg) translate(7.92px, 0px);
  78.     transform: rotate(90deg) translate(7.92px, 0px);
  79. }
  80. .loading_leaf_4 {
  81.     -webkit-animation: opacity-4 1.25s linear infinite;
  82.     animation: opacity-4 1.25s linear infinite;
  83. }
  84. .loading_leaf_4:before {
  85.     -webkit-transform: rotate(120deg) translate(7.92px, 0px);
  86.     transform: rotate(120deg) translate(7.92px, 0px);
  87. }
  88. .loading_leaf_5 {
  89.     -webkit-animation: opacity-5 1.25s linear infinite;
  90.     animation: opacity-5 1.25s linear infinite;
  91. }
  92. .loading_leaf_5:before {
  93.     -webkit-transform: rotate(150deg) translate(7.92px, 0px);
  94.     transform: rotate(150deg) translate(7.92px, 0px);
  95. }
  96. .loading_leaf_6 {
  97.     -webkit-animation: opacity-6 1.25s linear infinite;
  98.     animation: opacity-6 1.25s linear infinite;
  99. }
  100. .loading_leaf_6:before {
  101.     -webkit-transform: rotate(180deg) translate(7.92px, 0px);
  102.     transform: rotate(180deg) translate(7.92px, 0px);
  103. }
  104. .loading_leaf_7 {
  105.     -webkit-animation: opacity-7 1.25s linear infinite;
  106.     animation: opacity-7 1.25s linear infinite;
  107. }
  108. .loading_leaf_7:before {
  109.     -webkit-transform: rotate(210deg) translate(7.92px, 0px);
  110.     transform: rotate(210deg) translate(7.92px, 0px);
  111. }
  112. .loading_leaf_8 {
  113.     -webkit-animation: opacity-8 1.25s linear infinite;
  114.     animation: opacity-8 1.25s linear infinite;
  115. }
  116. .loading_leaf_8:before {
  117.     -webkit-transform: rotate(240deg) translate(7.92px, 0px);
  118.     transform: rotate(240deg) translate(7.92px, 0px);
  119. }
  120. .loading_leaf_9 {
  121.     -webkit-animation: opacity-9 1.25s linear infinite;
  122.     animation: opacity-9 1.25s linear infinite;
  123. }
  124. .loading_leaf_9:before {
  125.     -webkit-transform: rotate(270deg) translate(7.92px, 0px);
  126.     transform: rotate(270deg) translate(7.92px, 0px);
  127. }
  128. .loading_leaf_10 {
  129.     -webkit-animation: opacity-10 1.25s linear infinite;
  130.     animation: opacity-10 1.25s linear infinite;
  131. }
  132. .loading_leaf_10:before {
  133.     -webkit-transform: rotate(300deg) translate(7.92px, 0px);
  134.     transform: rotate(300deg) translate(7.92px, 0px);
  135. }
  136. .loading_leaf_11 {
  137.     -webkit-animation: opacity-11 1.25s linear infinite;
  138.     animation: opacity-11 1.25s linear infinite;
  139. }
  140. .loading_leaf_11:before {
  141.     -webkit-transform: rotate(330deg) translate(7.92px, 0px);
  142.     transform: rotate(330deg) translate(7.92px, 0px);
  143. }
  144. @-webkit-keyframes opacity-0 {
  145.     0% {
  146.         opacity: 0.25;
  147.     }
  148.     0.01% {
  149.         opacity: 0.25;
  150.     }
  151.     0.02% {
  152.         opacity: 1;
  153.     }
  154.     60.01% {
  155.         opacity: 0.25;
  156.     }
  157.     100% {
  158.         opacity: 0.25;
  159.     }
  160. }
  161. @-webkit-keyframes opacity-1 {
  162.     0% {
  163.         opacity: 0.25;
  164.     }
  165.     8.34333% {
  166.         opacity: 0.25;
  167.     }
  168.     8.35333% {
  169.         opacity: 1;
  170.     }
  171.     68.3433% {
  172.         opacity: 0.25;
  173.     }
  174.     100% {
  175.         opacity: 0.25;
  176.     }
  177. }
  178. @-webkit-keyframes opacity-2 {
  179.     0% {
  180.         opacity: 0.25;
  181.     }
  182.     16.6767% {
  183.         opacity: 0.25;
  184.     }
  185.     16.6867% {
  186.         opacity: 1;
  187.     }
  188.     76.6767% {
  189.         opacity: 0.25;
  190.     }
  191.     100% {
  192.         opacity: 0.25;
  193.     }
  194. }
  195. @-webkit-keyframes opacity-3 {
  196.     0% {
  197.         opacity: 0.25;
  198.     }
  199.     25.01% {
  200.         opacity: 0.25;
  201.     }
  202.     25.02% {
  203.         opacity: 1;
  204.     }
  205.     85.01% {
  206.         opacity: 0.25;
  207.     }
  208.     100% {
  209.         opacity: 0.25;
  210.     }
  211. }
  212. @-webkit-keyframes opacity-4 {
  213.     0% {
  214.         opacity: 0.25;
  215.     }
  216.     33.3433% {
  217.         opacity: 0.25;
  218.     }
  219.     33.3533% {
  220.         opacity: 1;
  221.     }
  222.     93.3433% {
  223.         opacity: 0.25;
  224.     }
  225.     100% {
  226.         opacity: 0.25;
  227.     }
  228. }
  229. @-webkit-keyframes opacity-5 {
  230.     0% {
  231.         opacity: 0.270958333333333;
  232.     }
  233.     41.6767% {
  234.         opacity: 0.25;
  235.     }
  236.     41.6867% {
  237.         opacity: 1;
  238.     }
  239.     1.67667% {
  240.         opacity: 0.25;
  241.     }
  242.     100% {
  243.         opacity: 0.270958333333333;
  244.     }
  245. }
  246. @-webkit-keyframes opacity-6 {
  247.     0% {
  248.         opacity: 0.375125;
  249.     }
  250.     50.01% {
  251.         opacity: 0.25;
  252.     }
  253.     50.02% {
  254.         opacity: 1;
  255.     }
  256.     10.01% {
  257.         opacity: 0.25;
  258.     }
  259.     100% {
  260.         opacity: 0.375125;
  261.     }
  262. }
  263. @-webkit-keyframes opacity-7 {
  264.     0% {
  265.         opacity: 0.479291666666667;
  266.     }
  267.     58.3433% {
  268.         opacity: 0.25;
  269.     }
  270.     58.3533% {
  271.         opacity: 1;
  272.     }
  273.     18.3433% {
  274.         opacity: 0.25;
  275.     }
  276.     100% {
  277.         opacity: 0.479291666666667;
  278.     }
  279. }
  280. @-webkit-keyframes opacity-8 {
  281.     0% {
  282.         opacity: 0.583458333333333;
  283.     }
  284.     66.6767% {
  285.         opacity: 0.25;
  286.     }
  287.     66.6867% {
  288.         opacity: 1;
  289.     }
  290.     26.6767% {
  291.         opacity: 0.25;
  292.     }
  293.     100% {
  294.         opacity: 0.583458333333333;
  295.     }
  296. }
  297. @-webkit-keyframes opacity-9 {
  298.     0% {
  299.         opacity: 0.687625;
  300.     }
  301.     75.01% {
  302.         opacity: 0.25;
  303.     }
  304.     75.02% {
  305.         opacity: 1;
  306.     }
  307.     35.01% {
  308.         opacity: 0.25;
  309.     }
  310.     100% {
  311.         opacity: 0.687625;
  312.     }
  313. }
  314. @-webkit-keyframes opacity-10 {
  315.     0% {
  316.         opacity: 0.791791666666667;
  317.     }
  318.     83.3433% {
  319.         opacity: 0.25;
  320.     }
  321.     83.3533% {
  322.         opacity: 1;
  323.     }
  324.     43.3433% {
  325.         opacity: 0.25;
  326.     }
  327.     100% {
  328.         opacity: 0.791791666666667;
  329.     }
  330. }
  331. @-webkit-keyframes opacity-11 {
  332.     0% {
  333.         opacity: 0.895958333333333;
  334.     }
  335.     91.6767% {
  336.         opacity: 0.25;
  337.     }
  338.     91.6867% {
  339.         opacity: 1;
  340.     }
  341.     51.6767% {
  342.         opacity: 0.25;
  343.     }
  344.     100% {
  345.         opacity: 0.895958333333333;
  346.     }
  347. }

main.js

  1. // Loading
  2. import './components/Loading/index.css';
  3. import Loading from './components/Loading/index';
  4. Vue.use(Loading);

调用

  1. this.$loading('正在加载中...');
  2. this.$loading.close();

参考链接：
https://www.cnblogs.com/crazycode2/p/7927473.html

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/AllinToyou/article/detail/218851
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号