uniapp H5实现全局弹窗

<template>
	<view id="networK_popup">
    <u-popup  :show="weiXinPopup" mode="center" bg-color="transparent">
      <view class="flex-col" style="background-color: #FFFFFF;border-radius: 10px; width: 270px; position: relative">
        <view style="display: flex;justify-content: center;margin-top: 10px;font-size: 16px;font-weight: 500">
          {{wordMessage.title}}
        </view>
        <view
            style="margin-top: 10px;margin-bottom: 15px;color: #9A9A9A;font-size: 12px;font-weight: 400;padding: 0 10px">
          <view style="line-height: 20px">
            <text>{{wordMessage.content}}</text>
          </view>
        </view>
        <image @click="weiXinPopup=false" src="../../static/close.png"
               style="width: 25px;height: 25px;position: absolute;bottom: -40px;left: 125px"></image>
      </view>
    </u-popup>
	</view>
</template>

<script>
	import store from '../../store'
  export default {
		name:"networkPopup",
		data() {
			return {
        wordMessage:{},
        weiXinPopup:false
			};
		},
    mounted(){
      this.wordMessage=store.state.networkPopupConfig
      console.log(this.wordMessage)
      if(!this.wordMessage.available){
        this.weiXinPopup=true
        console.log(this.weiXinPopup)
      }
    },
	}
</script>

<style>

</style>

其中u-popup是使用的是uveiw2中的弹窗

2.创建一个名为globalPopup的js

// #ifdef H5
import networkPopup from '../networkPopup/networkPopup'
// #endif

let popupFrist=null

const install = Vue => {
  Vue.prototype.$popup = {
    showNetowrk(params) {
      let that = this;
      // Vue.store 传递参数
      store.commit('globalnetworkPopupConfig',params)
      // #ifdef H5
      const PopupVue = Vue.extend(networkPopup);
      const popupDom = new PopupVue();
      popupDom.vm = popupDom.$mount();
      const lastEl = document.body.lastElementChild;
      if(lastEl.id !=='networK_popup'){
        setTimeout(()=>{
          document.body.appendChild(popupDom.vm.$el)
          popupFrist=popupDom
        })
      }else {
      //这里是为解决重复出现弹窗不生效的情况
        popupFrist.$data.weiXinPopup=true
      }
      // #endif
    },
  }
}

export default install;

3.挂载全局的弹窗事件

1.引入上面的js （路径根据自己路径变更）
import globalPopup from ‘./components/globalPopup/globalPopup’;
2.使用vue.use传入vue参数
Vue.use(globalPopup);