uniapp全局弹窗自定义uni.showModal思路总结

整体来说推荐第四种nvue实现；
1.（适用于web,app不行）↓↓

// import PublicPopup from "@/pages/popup/PublicPopup.vue"
// import gloPopup from "@/utils/gloPopup.js"

Vue.use(uView);
 Vue.use(gloPopup)

Vue.config.productionTip = false

 let componetsBox= Vue.component('public-popup',PublicPopup)


App.mpType = 'app'

const app = new Vue({
    ...App,
	store
})
app.$mount()

//在 app.$mount()下添加
document.body.appendChild(new componetsBox().$mount().$el)

2. subnvue

3. 每个页面都有顶部导航栏，直接在公共顶部导航栏组件中加入弹窗组件 （还没有试过，算个思路）

4. 例子nvue实现（推荐！！！app√）
缺点：ipad上横屏底部留白
留白问题解决↓

在跳转时：
uni.navigateTo({
				url: "../popup/index",
				animationType:"none"//加上，完美解决底部留白
			})

具体实现：
新建 index.nvue【你想要的弹框组件】

<template>
		<view class="popup_con" :style="{height:windowHeight+'px',width:windowWidth+'px'}">
		<!-- </view> -->
		
		<view class="popup_contain" :style="{width:windowWidth/2+'px'}">
			<text class="popup_title">來電</text>
			<view>{{data.content}}</view>
			<view class="popup_btn">
				<text class="popup_btn1" style="color: #FFFFFF;" @click="handleAnswer">接聽</text>
				<text class="popup_btn2" @click="handleRefuse">拒絕</text>
			</view>

		</view>
		</view>
</template>

<script>
<script>

page.json

 {
			"path": "pages/popup/index",
			"style": {
				"navigationBarBackgroundColor": "#007AFF",
				"navigationBarTextStyle": "white",
				"background": "transparent", //把页面背景设置透明，默认是白色
				"animationType": "fade-in"
				}
}

app.vue(或其它页面运用)

显示：
uni.navigateTo({
				url:"../../pages/popup/index"
			})
隐藏：
uni.navigateBack({})

5. 自定义api ()

6. 全局组件 （不考虑原生组件覆盖问题的话，可用；或者用来非定位形式的公共部分实现）

7. plus.webview.create() url （暂时是个思路）
8. new plus.nativeObj.View(全局的话可能不太行，单个页面可以)
9. 插件

---

---

题外话：
谷歌工具：看txt文件有需要可私信联系我

---

---