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模板部分：（这部分代码没啥技术含量）

注册部分：（这是整块的核心）

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

 代码结束。这是