封装一个uniapp的全局弹窗组件，无需引入，全局使用

思路：

先写弹窗组件，在main.js中进行引入注册，然后新建一个这个组件的vue实例， 将这个vue实例挂载到全局this上面，通过调用全局事件总线，进行传值。

几个注意点：
 

第一步、编写.vue弹窗组件。

按照正常的公用组件的方式写一个弹窗组件就好

<template>
	<view class="smallDialog" v-if="inviteSHow || cpShow || roomSettingShow || homeShow" @tap="closeDialog">
		
	</view>
</template>

第二部、在mian.js中将该组件进行引入，方便全局使用该组件

import smallDialog from "@/components/liveComponents/smallDialog.vue" 

Vue.component('smallDialog', smallDialog)

第三步，使用$bus,进行数据的传递，从而触发组件

Vue.prototype.$bus = new Vue();

第四步，将全局弹窗组件实例挂载到根实例上 

我们应该如何操作我们第一步编写的,vue组件呢，我首先想到的是把这个组件放在app.vue里面，然后在组件上面绑定ref为modal，然而发现了报错，原来在uniapp中App.vue 本身不是页面，这里不能编写视图元素，也就是没有 <template> 。那就换一种别的方法：

2、对于H5页面以及小程序、app有不同的挂载方式，对于H5来说，用到了document，实现方法如下

// 创建一个新的 Vue 实例用于全局弹窗组件
 const dialogApp = new Vue({
	      render: h => h(smallDialog)
	    });
	    dialogApp.$mount();
	    document.body.appendChild(dialogApp.$el);
	    this.$smallDialog = dialogApp.$children[0];
	  
	    // 监听事件总线的 showSmallDialog 事件
	    this.$bus.$on('showSmallDialog', options => {
	      this.$smallDialog.show(options);
});

2、对于app以及小程序来说，无法使用document等获取dom，所以采用下面的方式

   // 其他平台的初始化逻辑
this.$smallDialog = this.selectComponent("#smallDialog");
   // 监听事件总线的 showSmallDialog 事件
this.$bus.$on('showSmallDialog', options => {
   this.$smallDialog.show(options);
});

3、main.js的完整代码

import Vue from 'vue'
import App from './App'
import store from './store' // store
import plugins from './plugins' // plugins
import './permission' // permission
import smallDialog from "@/components/liveComponents/smallDialog.vue" //组cp邀约组件

Vue.use(plugins)
Vue.component('smallDialog', smallDialog)

Vue.config.productionTip = false
Vue.prototype.$store = store

App.mpType = 'app'

const app = new Vue({
  ...App,
  mounted() {
	  if (process.env.VUE_APP_PLATFORM === 'h5') {
	    const dialogApp = new Vue({
	      render: h => h(smallDialog)
	    });
	    dialogApp.$mount();
	    document.body.appendChild(dialogApp.$el);
	    this.$smallDialog = dialogApp.$children[0];
	  
	    // 监听事件总线的 showSmallDialog 事件
	    this.$bus.$on('showSmallDialog', options => {
	      this.$smallDialog.show(options);
	    });
	  } else {
	    // 其他平台的初始化逻辑
	    this.$smallDialog = this.selectComponent("#smallDialog");
	    // 监听事件总线的 showSmallDialog 事件
	    this.$bus.$on('showSmallDialog', options => {
	      this.$smallDialog.show(options);
	    });
	  }
	  }
});

// 创建事件总线
Vue.prototype.$bus = new Vue();

app.$mount();

第五步，在弹窗组件上编写方法，用于改变值

show(options) {
				console.log("触发smalldialog组件")
			      // this.showDialog = true;
			      this.inviteShow = options.inviteShow || false;
			      this.cpShow = options.cpShow || false;
			      this.roomSettingShow = options.roomSettingShow || false;
			      this.homeShow = options.homeShow || false;
			      this.yaoqing = options.yaoqing || {};
			      this.personInfo = options.personInfo || {};
			    },

第六步，在其它页面上进行使用

bindCP() {
			
				this.$bus.$emit('showSmallDialog', {
					cpShow: true,
					yaoqing: {
					  user_avatar: 'path/to/avatar.jpg',
					  user_nick: 'User Nick',
					},
				  });
				  console.log("点击")

			},

整体思路：