vue自定義組件（三）函數式實現loading加載

頁面頂部進度條模式，服務模式（參考elementUI服務模式）	mask	Boolean	FALSE	let cesg = {};       //展現與傳值       cesg = this.$dhtLoading({ mask: true, background: "red" });       //關閉       cesg.close();	如果你不調用結束的話，dom元素會一直存在於頁面	當進度條展現的時候是否禁止頁面操作
	value	Number	0			進度條初始或最終進度
	group	Array	[5, 15, 30, 55, 60, 75, 80, 85, 93]			模擬進度條漸進情況，每隔0.5秒變化一次
	background	String	#07b970			進度條顏色

說明：

樣式是頂部導航條，加載進度效果，csdn是紅色，我的是綠色，你可以自己改顏色。

使用方式：和elementUI中的服務式加載loading組件一致

let cesg = {};
      //展現與傳值
      cesg = this.$dhtLoading({ mask: true, background: "red" });
      //關閉
      cesg.close();

代碼部分：

vue模板部分：（這部分代碼沒啥技術含量）

<template>
  <div
    class="dht-loading"
    :style="{ width: value + 'vw', background: background }"
  >
    <div class="dht-loading-animation"></div>
    <div
      v-if="mask"
      class="dht-loading-mask"
      :style="{ zIndex: this.$dhtUI.zIndex }"
    ></div>
  </div>
</template>

<script>
export default {
  name: "dhtLoading",
  data() {
    return {
      mask: false,
      value: 0,
      group: [5, 15, 30, 55, 60, 75, 80, 85, 93],
      background: "#07b970"
    };
  },
  beforeCreate() {},
  created() {},
  beforeMount() {},
  beforeDestroy() {},
  destroyed() {
    document.body.style.overflowX = "hidden";
  },
  mounted() {
    if (this.mask) {
      document.body.style.overflow = "hidden";
    }
    this.gradual();
  },
  methods: {
    //分組分組漸進
    gradual() {
      let len = this.group.length;
      let self = this;
      if (this.group.length > 0) {
        for (let i = 0; i < len; i++) {
          (function(i) {
            setTimeout(() => {
              self.value = self.group[i];
            }, 500 * i);
          })(i);
        }
      }
    }
  }
};
</script>

<style lang="scss">
.dht-loading {
  position: absolute;
  top: 0;
  width: 100vw;
  height: 3px;
  border-radius: 1.5px;
  background: #07b970;
  transition: width 500ms;
  .dht-loading-animation {
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.5);
    animation: load 1s ease infinite;
    @keyframes load {
      0% {
        width: 0;
      }
      100% {
        width: 100%;
      }
    }
  }
  //觸摸穿透蒙版
  .dht-loading-mask {
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: 2000;
    pointer-events: auto;
  }
}
</style>

註冊部分：（這是整塊的核心）

import vue from "vue";
import loading from "./loading.vue";

/*loading.install = function(vue) {
  vue.component(loading.name, loading);
};*/
const loadingDom = vue.extend(loading);
//定義關閉函數
loadingDom.prototype.close = function() {
  if (this.$el && this.$el.parentNode) {
    //在關閉之前先進度條走滿，然後消失
    this.value = 100;
    setTimeout(() => {
      this.$el.parentNode.removeChild(this.$el);
      this.$destroy();
    }, 500);
  }
};
//定義移除節點函數
/*let oldDom = ""; //預存節點信息
const loadClose = function() {
  console.log(oldDom.$el);
  if (oldDom.$el && oldDom.$el.parentNode) {
    oldDom.$el.parentNode.removeChild(oldDom.$el);
  }
  oldDom.$destroy && oldDom.$destroy();
};*/

const load = options => {
  //options爲傳入參數
  let node = new loadingDom({
    el: document.createElement("div"),
    data: options
  });
  //獲得body值
  let body = document.body;
  //頁面禁止滾動
  //body.style.overflow = "hidden";
  //移動端
  //body.style.position = "fixed";
  //頁面放開滾動
  //body.style.overflowX = "hidden";
  //插入元素節點
  body.appendChild(node.$el);

  return node;
};

export default load;

安裝部分：

import service from "./progress";
import directive from "./mask/directive";

export default {
  install(vue) {
    vue.use(directive);
    vue.prototype.$dhtLoading = service;
  },
  service,
  directive
};

//批量註冊部分
import Img from "./img/index"; //替代img標籤
import Text from "./text/index"; //替代p標籤
//需要獨立註冊部分
import Loading from "./loading/install"; //加載標籤
//批量註冊部分
const components = [Img, Text];

// eslint-disable-next-line no-unused-vars
const install = function(vue, opts = {}) {
  //初始化部分
  vue.prototype.$dhtUI = {
    zIndex: opts.zIndex || 2000
  };
  //指令註冊部分
  vue.use(Loading.directive);
  //批量組件註冊
  components.forEach(component => {
    vue.component(component.name, component);
  });
  //掛載到vue原型上
  vue.prototype.$dhtLoading = Loading.service;
};

//代碼意思上是指必須要vue已經存在纔可以
if (typeof window !== "undefined" && window.Vue) {
  install(window.Vue);
}

export default {
  //版本
  version: "1.0.0",
  //全註冊
  install,
  //局部註冊
  Img,
  Text,
  Loading
};

 代碼結束。這是