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
};

 代码结束。这是