uniapp自定义全局弹窗组件

可以参考一下方法，如果大家有更好的全局弹窗方法欢迎留言

//使用方法
//在main.js里全局注册
import globalModal from './components/global-popup.vue'
Vue.component('global-popup', globalModal)
//在需要的页面引用组件
<global-popup ref="globalModal"></global-popup>
this.$refs.globalModal.openPopup({
	title:'标题',
	content:'弹窗内容',
	confirm(){
		//点击确定逻辑
	},
	cancel(){
		//点击取消逻辑
	},
})
//弹窗组件
<template>
	<view class="global-popup" v-if="visible">
		<view class="content-box">
			<text class="title">{{parament.title}}</text>
			<view class="content">{{parament.content}}</view>
			<view class="button-popup">
				<button @click="cancelPopup(parament.cancel())" class="cancel_btn">{{parament.cancelText}}</button>
				<button @click="confirmPopup(parament.confirm())" class="confirm_btn">{{parament.confirmText}}</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				visible: false,
				parament: {
					title: '提示',
					content:'提示内容',
					cancelText:'取消',
					confirmText:'确认',
					confirm() {},
					cancel(){},
				},
			};
		},
		
		methods: {
			//点击确认
			confirmPopup(e) {
				e
				this.closePopup()
			},
			//点击取消
			cancelPopup(e){
				e
				this.closePopup()
			},
			// 弹窗打开逻辑
			openPopup(params) {
				this.visible = true;
				this.parament = {
					...this.parament,
					...params
				}
			},
			// 弹窗关闭逻辑
			closePopup() {
				this.visible = false;
			},
		},
	};
</script>