Vue 封装 loading 插件

具体属性：

this.$loading(option: Object): Object -> close();

option 属性：

属性名	类型	描述	默认值
ele	DOM元素	要添加加载的DOM元素	document.body
message	String	加载显示的文本	“loading…”
color	String	加载显示文本颜色	“#000000”
iconfont	String	加载文本前方显示的 iconfont 类名(“icon-xxx”)	“”
backgroundColor	String	加载背景颜色（建议使用 rgba）	“rgba(44, 62, 80, .7)”

代码如下：

vp-loading.vue

<template>
  <div class="vp-loading" >
    <span :class="'iconfont ' + iconfont"></span>{{ message }}
  </div>
</template>

<script>
export default {
  name: "VpLoading",
  props: {
    message: {
      type: String,
      default: ""
    },
    iconfont: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
    }
  },
  created() {

  },
  mounted() {

  }
}
</script>
<style scoped>
.vp-loading {
  position: fixed;
  z-index: 999;
  top: 0px;
  right: 0;
  left: 0;
  bottom: 0;
  background-color: rgba(44, 62, 80, .7);
  display: flex;
  justify-content: center;
  align-items: center;
}
.iconfont {
  margin-right: .2rem
}
</style>

loading.js

import VpLoading from "./vp-loading.vue";

let loading = {};

loading.install = Vue => {
  Vue.prototype.$loading = function(option = {}) {
    let options = {
      ele: option && option.ele || document.body,
      message: option && option.message || "loading...",
      color: option && option.color || "#000000",
      iconfont: option && option.iconfont || "",
      backgroundColor: option && option.backgroundColor || "rgba(44, 62, 80, .7)" // 建议使用 rgba 格式，并设置透明度
    }
    let vploadingInstance = Vue.extend(VpLoading);
    let vploading
    let loadingEle = document.createElement("div");
    let loadEle;
    Vue.nextTick().then(() => {
      vploading = new vploadingInstance({
        propsData: {
          message: options.message,
          iconfont: options.iconfont
        }
      });
      vploading.$mount(loadingEle);
      let el = vploading.$el;
      loadEle = options.ele;
      if (loadEle !== document.body) {
        loadEle.setAttribute("style", "position: relative");
        el.setAttribute("style", "position: absolute; top: 0; right: 0; left: 0; bottom: 0")
      }
      el.style.color = options.color;
      el.style.backgroundColor = options.backgroundColor;

      loadEle.appendChild(el);
    });

    return {
      close: () => {
        vploading.$el.remove();
      }
    };
  };
};

export default loading;

main.js

import vploading from  './components/loading';
Vue.use(vploading);

组件内部使用

mounted() {
  let loadObj = this.$loading({
    // ele: document.getElementsByClassName("test")[0],
    color: "#00a8ff",
    iconfont: "icon-redupaixu",
  });
  setTimeout(() => {
    loadObj.close();
  }, 3000);
},

如需要其他更多组件，请移步到本人开发的 Vue 组件库文档：Vpro_UI
如果觉得好的话，请在 Github 上点个 star ，非常感谢！