uniapp公共弹窗
uniapp公共弹窗的实现方法
在uniapp中实现公共弹窗通常涉及全局组件封装、状态管理以及动态调用。以下是几种常见方案：
封装全局组件
创建一个自定义弹窗组件（如common-popup.vue），通过props控制显示内容和样式：
<template>
<view class="popup-mask" v-if="visible" @click="close">
<view class="popup-content" @click.stop>
<slot></slot>
</view>
</view>
</template>
<script>
export default {
props: {
visible: Boolean
},
methods: {
close() {
this.$emit('update:visible', false)
}
}
}
</script>使用Vuex管理状态
通过状态管理统一控制弹窗显示：
// store.js
const store = new Vuex.Store({
state: {
popup: {
show: false,
content: ''
}
},
mutations: {
showPopup(state, content) {
state.popup = { show: true, content }
}
}
})挂载到Vue原型
将弹窗方法挂载到全局便于调用：
// main.js
Vue.prototype.$popup = {
show(options) {
uni.showModal({
title: options.title,
content: options.content,
showCancel: options.showCancel || false
})
}
}
// 页面调用
this.$popup.show({ title: '提示', content: '操作成功' })基于uni-app原生API
直接使用内置弹窗组件：
uni.showModal({
title: '标题',
content: '内容',
success(res) {
if (res.confirm) {
console.log('用户点击确定')
}
}
})组件通信方式
通过事件总线或provide/inject实现跨组件调用：
// eventBus.js
import Vue from 'vue'
export const EventBus = new Vue()
// 触发弹窗
EventBus.$emit('show-popup', {type: 'alert'})
// 监听事件
EventBus.$on('show-popup', config => {
// 处理弹窗逻辑
})注意事项
- 遮罩层点击关闭需注意事件冒泡阻止
- 多端兼容需测试不同平台的UI表现
- 动态内容传递建议使用插槽(slot)机制
- 频繁调用的弹窗建议做好组件缓存
以上方案可根据具体需求组合使用，复杂场景推荐采用全局组件+Vuex的方案，简单提示类需求直接使用uni-app原生API更高效。
