uni-app - 在纯 JS 文件中调用自定义弹框组件 / 封装全局 API 调用弹框组件(解决小程序、APP 无法使用 document.body.appendChild 插入组件节点)适配全端

本文介绍了如何在uni-app中,特别是在纯JS文件和组件中调用自定义弹框组件,解决H5、小程序和APP无法使用document.body.appendChild的问题。通过编译阶段插入自定义内容和vue-inset-loader,实现全端适配的全局组件调用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

前言

如果您自定义了一个弹框组件,想要在纯 JS 文件或组件中进行灵活调用,本文可以帮到您。
支持 uniapp v2 / v3 版本!

例如,我们通常都会在请求配置中写好拦截器,当服务器状态码(code)为 500 时,表示用户未登录,这时候我们就需要弹出登录框让用户进行登录。

再或者,有些开发者觉得 uni-app 自带的弹框不好看,想自己定义一个全局弹框。

但问题在于,我们的弹框(自定义组件)无法通过 JS 语法进行调用。


网上大部分方法都是通过 vue.extend 创建组件构造器后通过 document.body.appendChild 插入至文档中,这样就可以实现了,但现实是仅 适用于 H5 端,因为小程序、App 端没有 document 对象。

会提示:error: document is undefined


问题分析

其实,

### 自定义 `uni.showModal` 窗样式的实现方法 在 Uni-app 中,原生的 `uni.showModal` 方法提供了简单的窗功能,但由于其样式固定且不可更改,在不同设备上的表现可能不尽如人意。为了满足更复杂的需求,可以通过以下几种方式来实现高度自定义窗。 #### 使用 Vue 组件创建自定义窗 通过引入 Vue 组件的方式可以完全控制窗的内容和样式。以下是具体实现: 1. **创建公共组件** 创建一个名为 `CustomPopup.vue` 的组件文件,用于封装自定义窗逻辑和样式。 ```vue <!-- CustomPopup.vue --> <template> <view v-if="isShow" class="popup-container"> <view class="popup-content"> <text>{{ title }}</text> <text>{{ content }}</text> <button @click="confirm">确认</button> <button @click="cancel">取消</button> </view> </view> </template> <script> export default { data() { return { isShow: false, title: '', content: '' }; }, methods: { show(options) { this.title = options.title || ''; this.content = options.content || ''; this.isShow = true; }, confirm() { this.isShow = false; typeof this.onConfirm === 'function' && this.onConfirm(); }, cancel() { this.isShow = false; typeof this.onCancel === 'function' && this.onCancel(); } } }; </script> <style scoped> .popup-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; z-index: 999; } .popup-content { padding: 20px; border-radius: 8px; background-color: white; text-align: center; } </style> ``` 2. **注册并使用组件** 将上述组件注册到项目中,并在需要的地方调用它。 ```javascript // main.js 或其他入口文件 import CustomPopup from '@/components/CustomPopup.vue'; Vue.component('custom-popup', CustomPopup); // 调用示例 this.$refs.customPopup.show({ title: '提示', content: '这是一个自定义窗' }); ``` 3. **动态挂载至 DOM** 如果希望在整个应用范围内都可以随时显示窗,则可以在 `app.$mount()` 后将其动态挂载到文档体中[^3]。 ```javascript const customPopupInstance = new Vue(CustomPopup).$mount(); document.body.appendChild(customPopupInstance.$el); window.popup = customPopupInstance; // 提供全局访问 ``` #### 处理多页面场景下的窗重复问题 当涉及多个页面切换时,可能会出现窗未及时关闭而重复显示的问题。一种常见的解决办法是在每次打开新页面前清除之前的窗实例[^4]。 ```javascript // 页面跳转前清理窗 if (window.popup) { window.popup.isShow = false; } ``` --- ### 总结 以上方案展示了如何利用 Vue 组件自定义 `uni.showModal` 的外观与行为。相比传统的 `uni.showModal`,这种方式更加灵活可控,能够适应复杂的业务需求以及跨平台的一致性设计[^1]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

王二红

请作者喝杯咖啡 :)

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值