更新记录

1.0.5（2023-08-12）

其他功能添加

1.0.4（2023-08-05）

1.0.4示例代码完成

1.0.3（2023-07-30）

1.0.3

平台兼容性

xpc-pop

该项目封装了自定义弹窗

传入参数说明 loadingAndToast

注： toast自动关闭的弹窗，调用需要节流处理

传入参数说明 modalPop

调用示例

普通组件调用

注意：这样调用没得默认值

<template>
    <xpc-pop ref="pop"></xpc-pop>
    <div @tap="showToast">打开提示弹窗</div>
    <br/>
    <br/>
    <div @tap="showModal">打开对话框</div>
    <div>选择的状态:{{ JSON.stringify(modalStatus)}}</div>
</template>

<script setup>
    import {ref} from 'vue'
    const pop = ref('pop')
    const modalStatus = ref('')
    const showToast = () => {
        pop.value.show({
            type:'loadingAndToast',
            title: '提示弹窗',
            duration: 2000
        })
    }
    const showModal = () => {
        pop.value.show({
            type:'modalPop',
            title: '确认框',
            content: '确认框内容',
            confirmText: '确认',
            success: (res)=>{
                modalStatus.value = res
            }
        })
    }

</script>

函数式调用

这种调用先挂载在globalData上，后续直接通过globalData上挂载的方法调用

// 在App.vue中先引用
<script>
    import {Pop} from './uni_modules/xpc-pop/common/pop'
    export default {
        globalData:{
            popShow: Pop.showPop,
            popClose: Pop.closePop
        }
    }
</script>

// 需要的组件中引入,注意在一个主页面只需要引入一次就行
// text.vue
<template>
    <xpc-pop></xpc-pop>
    <div class="loadingAndToast">
        <div @tap="clickHandler('loading')">loading</div>
        <div @tap="clickHandler('toast')">toast</div>
    </div>
</template>

<script setup>
    import {onMounted, ref} from 'vue'
    onMounted(()=>{
        getApp().globalData.popShow({
            type:'loadingAndToast',
            title: '调用在onMounted生命周期后',
            isLoading: false
        })
    })
    const clickHandlrObj = {
        loading: () => {
            getApp().globalData.popShow({
                type:'loadingAndToast',
                title: 'loading',
                duration: 0
            })
        },
        toast: () => {
            getApp().globalData.popShow({
                type:'loadingAndToast',
                title: 'toast',
                isLoading: false,
                maskShow: false
            })
        }
    }
    const clickHandler = (type) => {
        clickHandlrObj[type]()
    }
</script>

<style>
.loadingAndToast{
    display: flex;
    padding: 0 60rpx;
    justify-content: space-between;
}
</style>

覆盖原生导航栏

// 先新建一个pagePop.vue页面
<template>
        <xpc-pop></xpc-pop>
</template>

<script setup>
    uni.$on('pop',(data)=>{
        getApp().globalData.popShow(data)
    })
</script>

<style>
    page{
        background-color: transparent;
    }

</style>
// 在page.json中注册
{
    "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
        {
            "path" : "pages/pagePop/pagePop",
            "style" :                                                                                    
            {
                 "navigationStyle":"custom",
                 "app-plus": {
                    "animationDuration": 200,
                    "animationType": "fade-in",
                    "background": "transparent",
                    "backgroundColorTop": "transparent",
                    "popGesture": "none",
                    "scrollIndicator": false,
                    "titleNView": false
                 }
            }

        }
}
// 使用示范
<template>
    <div @tap="goPagePop">覆盖原生导航栏</div>
</template>

<script setup>
    const goPagePop = () => {
        uni.navigateTo({
            url: "/pages/pagePop/pagePop"
        })
        setTimeout(()=>{
            uni.$emit('pop',{
                type: 'modalPop',
                title: '标题',
                content: '内容',
                cancelStyle: {
                    color: 'gray',
                    border: '1rpx solid #000',
                    borderRadius: '12rpx'
                },
                success: (res) => {
                    console.log(res);
                    // 调用成功后返回
                    uni.navigateBack()
                }
            })
        })
    }
</script>

<style>

</style>

其他用法，嵌套弹窗和查询是否有激活弹窗

<template>
    <xpc-pop ref="pop1"></xpc-pop>
    <xpc-pop ref="pop2"></xpc-pop>
    <div class="other">
        <div @tap="nested">嵌套弹窗</div>
        <div @tap="popIsActive">检测当前是否有弹窗激活</div>
    </div>
</template>

<script setup>
    import {onMounted, ref} from 'vue'
    const pop1 = ref()
    const pop2 = ref()
    const nestedSuceess = (res) => {
        getApp().globalData.popShow({
            type: 'modalPop',
            id: pop2.value.id,
            title: '二级弹窗',
            content: `你确认${res.cancel?'否':'是'}`,
            boxStyle: {
                 width: '380rpx',
                 height: '260rpx',
                 padding: '0 25rpx'
            },
            buttonStyle: {
                padding: 0
            },
            confirmStyle:{
                height: '50rpx', 
            },
            cancelStyle: {
                height: '50rpx',
                color: 'gray',
                border: '1rpx solid #000',
                borderRadius: '12rpx'
            },
            success: (res) => {
                console.log(res);
                console.log(getApp().globalData);
                getApp().globalData.closeAllPop()
            }
        })

    }
    const nested = ()=>{
        getApp().globalData.popShow({
            type: 'modalPop',
            id: pop1.value.id,
            title: '一级弹窗',
            content: '嵌套弹窗',
            cancelStyle: {
                color: 'gray',
                border: '1rpx solid #000',
                borderRadius: '12rpx',
            },
            success: nestedSuceess
        })
    }
    const popIsActive = () => {
        console.log(getApp().globalData.isShow({
            type: 'modalPop'
        }));
    }

</script>

<style>

</style>