手动添加dialog，满满干货！

利用vue.extend和$mount实现一个全局的dialog

step1：

//App.vue
既然是全局dialog，需要在App文件中添加个固定位置，方便在任何组件调用
<div id="app">
...
	<div id="root-dialog"></div>
...
</div>

step2：

//dialog.vue
<template>
//自己想定义的组件的样式,此处省略
	<div v-if="showDialog">{{message}}</div>
</template>
<script>
export default{
	data(){
		return{
			showDialog:false,
			message:"我是个dialog组件"
		}
	}
}
</script>

step3

//为dialog添加js控制，增加自己的一些配置项
import Dialog from "../dialog.vue"
import Vue from "vue"
//利用vue.extend创建组件对象
const DialogConstructor = Vue.extend(Dialog)
const DialogConstructor = new DialogConstructor({
	data:{
		showPopup:false,//是否显示
	}
})
//组件配置的添加与挂载
const dialogCreateFunction = (options,confirmBack,cancelBack){
	options = options || {}
	let root = document.querySelector("#root-dialog");
	if(!root.hasChildNodes()){
		DialogConstructor.id = "xxxx"
		DialogConstructor.$mount()
		//$mount() 不带参数，会把组件在内存中渲染完毕。因为没有挂载到节点上，因此显示不了组件。此时的DialogConstructor已经是一个标准的Vue组件实例，因此它的$el属性也可以被访问。
		root.appendChild(DialogConstructor.$el);
	}
	//此处可以为组件添加一些属性
	DialogConstructor.$props.title = "新创建的dialog组件"
	...
	//修改js的数据
	DialogConstructor.$data.showPopup = true
}
//导出
export default{
	install(Vue){
		Vue.prototype.$dialog = dialogCreateFunction
	}
}

step4

//在main文件中引入即可
import Dialog form "xxx.js"
Vue.use(Dialog)

大功告成！

对vue.extend不太理解的移步这里