插件loading开发

插件loading开发

1.新建loading.vue 文件

<template>
  <!--loading-->
    <div class="pop" v-show="show" @mousewheel.prevent>
      <div class="confirm">
				<img src="../../assets/image/loading.gif" />
				<div>{{text}}</div>
      </div>
    </div>
</template>

<script>
export default {
	props:{
		show:Boolean,
		text:{
			type:String,
			default:'加载中,请稍后...'
		}
	}
 };
</script>

<style scoped lang="less">
.pop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  z-index: 10;
  .confirm {
    position: fixed;
    top: 30%;
    left: 50%;
    margin-left: -330px;
    width: 540px;
    height: 300px;
    z-index: 100;
    text-align: center;
    color:#333;
    background:#fff;
    border-radius: 5px;
    img {
      width: 200px;
      display: block;
      margin: 0 auto;
      margin-top: 40px;
    }
  }
}
</style>

2.新建loading.js文件

import Vue from 'vue'
import loadingComponent from './loading.vue'

let instance;

//创建构造器
const LoadingConstructor = Vue.extend(loadingComponent);

//实例化并挂载在DOM元素上
//挂载方式一
instance = new LoadingConstructor().$mount();
console.log(instance)
//挂载方式二
// instance = new LoadingConstructor({
// 	el:document.createElement('div')
// }).$mount();

instance.show = false;

//自定义方法，来操作组件内部的参数或者方法
const loading = {
	show(options = {}) { //设置默认参数是空对象
		instance.show = true;
		if (options) {
			//将已挂载实例追加到body中
			document.querySelector('body').appendChild(instance.$el)
			//如果用户传值则使用用户传的值，否则使用默认值
			instance.text = options.text || instance.text;
		}
	},
	hide() {
		instance.show = false;
	}
}
export default {
	//Vue.js的插件应该暴露一个install方法。这个方法的第一个参数是Vue构造器，第二个参数是一个可选的选项对象
	install(Vue,options) {
		if (!Vue.$loading) {
			//将自定义方法挂载在Vue实例上
			Vue.$loading = loading;
		}
    
		//注入组件选项---全局混入
    	Vue.mixin({
    		created(){
    			this.$loading = Vue.$loading;
    		}
    	})

		//添加到实例方法
		// Vue.prototype.$loading = function(){};
	}
}

3.在main.js文件中注入插件

import loading from './base/loading/loading.js'
Vue.use(loading)

4.使用

this.$loading.show()
或
this.$loading.show({'text':"我的加载"})

this.$loading.hide()