6***@qq.com
6***@qq.com
  • 发布:2020-01-15 21:25
  • 更新:2021-09-23 14:53
  • 阅读:9147

请问uniapp如何封装全局api调用弹窗组件?(uni.showModal自定义版)

分类:uni-app

h5端可以使用vue.extend创建组件构造器后append至document中,但是app端没有document对象
(需求是在外部端公共的js里调用自定义的confirm组件,而组件是写在页面或组件中,因此控制不到,原生uni.showModalui又不满意)

2020-01-15 21:25 负责人:无 分享
已邀请:
m***@qq.com

m***@qq.com

组件写在页面里。外部公用JS用事件触发。

  • 6***@qq.com (作者)

    不是很明白,能举个例子吗? 谢谢了

    2020-01-16 15:32

choin

choin

写一个组件a,里面放所有的全局弹窗组件,外部点用这a组件里的某组件。

jessie

jessie

请问解决了吗 我也遇到了这个需求

  • 鹅鹅鹅鹅

    刚写了个loader,可以实现全局引用,https://ask.dcloud.net.cn/article/39345

    2021-09-23 12:16

半晴雨滴

半晴雨滴 - 选择我所爱的,爱我所选择的。

同问,有解决吗?

Hiroshi

Hiroshi - 小白一个

同问,有业务需求

m***@qq.com

m***@qq.com

自定义的组件里

uni.$on('自定义的事件名', (options) => {  
// ... 显示的逻辑  
 this.show()  
})

其他地方调用

uni.$emit('自定义的事件名', options)
  • 霍金

    你这样写得话 所有页面都得调用这个组件了 不然没法触发公共组件内得函数 你这个$on也就触发不了了。

    2020-04-11 18:13

  • m***@qq.com

    回复 霍金: 对的。

    2020-04-11 19:43

  • ahhhhhhh

    回复 霍金: 有好的解决方式吗

    2020-05-06 18:19

霍金

霍金 - 阿伟已经死了,你挑的嘛,偶像!

楼主你怎么弄得?

2***@qq.com

2***@qq.com

请问解决了吗

h***@163.com

h***@163.com

楼主解决了吗?

  • 同学 解决了吗

    2020-12-22 15:27

2***@qq.com

2***@qq.com

楼主解决了嘛,我现在也遇到这个问题了

6***@qq.com

6***@qq.com

楼主解决了吗?我也遇到这个问题

Gushxi

Gushxi

同问:全局自定义弹框

Gushxi

Gushxi

https://blog.csdn.net/weixin_44810066/article/details/116060159?spm=1001.2014.3001.5501

i***@qq.com

i***@qq.com

鹅鹅鹅鹅

鹅鹅鹅鹅

刚写了个loader,可以实现全局引用,https://ask.dcloud.net.cn/article/39345

[已删除]

[已删除]

main.js

const androidUtil = require('./common/android-util.js');  
globalThis.tools = androidUtil;

common/android-util.js

module.exports = {  
/**  
     * 弹窗组件  
     * */  
    showPopup(options) {  
        let params = {  
            title: "提示",  
            content: "自定义内容",  
            align: "center", // 对齐方式 left/center/right  
            cancelText: "取消", // 取消按钮的文字  
            cancelColor: "#FFFFFF", // 取消按钮颜色  
            confirmText: "确定", // 确认按钮文字  
            confirmColor: "#FFFFFF", // 确认按钮颜色   
            showCancel: true // 是否显示取消按钮,默认为 true  
        }  

        Object.assign(params, options)  
        //#ifndef APP-PLUS  
        // 除开app平台  
        return new Promise((resolve) => {  
            uni.showModal({  
                ...params,  
                success: res => {  
                    if (res.confirm) {  
                        resolve(true)  
                    } else if (res.cancel) {  
                        resolve(false)  
                    }  
                },  
                fail: (res) => {  
                    console.log(res)  
                }  
            })  
        })  
        //#endif  

        //#ifdef APP-PLUS  
        // app平台  
        uni.navigateTo({  
            url: "/pages/modal/modal",  
            success: (res) => {  
                res.eventChannel.emit('receiveOptions', {  
                    data: params  
                });  
            },  
            fail(res) {  
                console.log(res)  
            }  
        })  

        return new Promise((resolve) => {  
            uni.$once("AppModalCancel", (e) => {  
                uni.$off('AppModalConfirm');  
                resolve(false)  
            })  
            uni.$once("AppModalConfirm", (e) => {  
                uni.$off('AppModalCancel');  
                resolve(e || true)  
            })  
        });  
        //#endif  
    }  
}

/pages/modal/modal.nvue 见附件..样式自己修改 小程序就可以使用Vue.prototype.***= androidUtil;都差不多
调用方法就tools.showPopup({}).then()

该问题目前已经被锁定, 无法添加新回复