Vue.extend的基本使用

使用extend自定义一个全屏loading组件

1、定义loading组件

import Vue from "Vue";
const LoadingCom = Vue.extend({
	template:`<div 
				style="position:fixed;left:0;right:0;width:100%;height:100%;z-index:999;background:#d8d8d8;color:#000;"
				id="aaa"
			>
			{{msg}}
			</div>`,
	props:{
		msg:{
			type:String,
			default:""
		}
	},
	created() {//还可以有其它的生命周期
		console.log("组件生命周期");	
	}
});

2、实例化loading组件信息

function loading(msg){
	const div = document.createElement("div");
	div.setAttribute("id","aaa");//这里注意ID要跟第一步的组件ID一致
	document.body.append(div);
	new LoadingCom({//实例化组件信息，这里的props会替换掉第一步中组件的props
		props:{
			msg:{
				type:String,
				default:msg
			}
		}
	}).$mount("#aaa");
	return () => {//返回一个方法，调用此方法会移除掉这个组件
		document.body.removeChild(document.getElementById("aaa"));
	}
}

3、挂载在全局上

Vue.prototype.$load = loading;

4、在xxx.vue界面中使用

<template>
	<div id="app">
		<el-button @click="show">按钮</el-button>
	</div>
</template>
<script>
export default {
	name:"App",
	methods:{
		show(){
			const load = this.$load("正在加载");
			setTimeout(() => {
				load();
			}, 2000);
		}
	}
}
</script>
<style lang="scss">

</style>

5、如果控制台出现这个错误，可以在vue.config.js中设置下面的参数配置（runtimeCompiler:true）