更新记录

1.0（2025-07-11） 下载此版本

无

平台兼容性

uni-app(4.11)

uni-app x(4.11)

完整示例

<template>
    <jcode-navbar leftIcon="left" title="弹窗展示"></jcode-navbar>

    <view class="container">
        <view class="button-group">
            <button v-for="(item,index) in formList" :key="index" class="custom-btn" @click="handleClick(index)">
                {{ item.title }}
            </button>
        </view>
    </view>

    <!-- 内容换行直接加\n 已经兼容 且自动居中 如下 -->
    <jcode-dialog ref="dialog1" :isMaskClick="isMaskClick" @buttonBack="buttonBack" type="dialog"
        :message="'自定义\n内容'"></jcode-dialog>

    <jcode-dialog ref="dialog2" :isMaskClick="isMaskClick" @buttonBack="buttonBack" type="dialog" :message="'更改按钮文字'"
        leftButtonText="左边" rightButtonText="右边"></jcode-dialog>

    <jcode-dialog ref="dialog3" :isMaskClick="isMaskClick" @buttonBack="buttonBack" type="dialog" :message="'更改按钮颜色'"
        leftButtonText="绿色" rightButtonText="红色" leftButtonTextColor="green" rightButtonTextColor="red"></jcode-dialog>

    <jcode-dialog ref="dialog4" :isMaskClick="isMaskClick" @buttonBack="buttonBack" type="contentSlot">
        <view style="background-color: black;color: white;text-align: center;">插槽</view>
    </jcode-dialog>

    <jcode-dialog ref="dialog5" :isMaskClick="isMaskClick" @buttonBack="buttonBack" type="buttonSlot">
        <view style="background-color: black;color: white;text-align: center;">插槽</view>
        <view style="text-align: center;height: 50px;" @click="dialog5.close()">关闭</view>
    </jcode-dialog>

    <jcode-dialog ref="dialog6" type="buttonSlot" theme="用户隐私政策概要">
        <view style="display: flex;flex-direction: column;justify-content: center;align-items: center;width: 100%;">
            <view class="message" style="    padding: 30px; line-height: 50rpx;font-size: 30rpx;text-align: justify;">
                感谢您使用本小程序，我们将通过
                <span class="f-26" style="color: #12A1FE;" @click="msg('用户协议')">
                    《用户协议》
                </span>
                和
                <span class="f-26" style="color: #12A1FE;" @click="msg('隐私协议')">
                    《隐私协议》
                </span>来帮助您了解在我们服务过程中可能会收集、使用、存储和共享您的个人信息的情况。请您务必仔细阅读、充分理解相关内容，若您同意，请选择同意并继续接受我们的服务;若您不同意，请选择不同意并退出。
            </view>
            <view
                style="width: 80%;background-color: #12A1FE;height: 90rpx;display: flex;justify-content: center;align-items: center;border-radius: 40rpx;color: white;font-weight: 600;font-size: 30rpx;"
                @click="dialog6Button('同意')">同意并继续</view>
            <view style="font-size: 28rpx;margin-top: 30rpx;color: gray;margin-bottom: 40rpx;"
                @click="dialog6Button('不同意')">不同意并退出</view>
        </view>
    </jcode-dialog>
</template>

<script lang="ts" setup>
    import {
        ref,
        getCurrentInstance
    } from "vue";

    import {
        onShow
    } from "@dcloudio/uni-app";

    const {
        proxy
    } = getCurrentInstance();

    // 设置点击遮罩层是否关闭弹窗
    const isMaskClick = ref(false);  //否

    const formList = ref([{
        title: '普通弹窗',
    },
    {
        title: '更改按钮文字',
    },
    {
        title: '更改按钮颜色',
    },
    {
        title: '插槽1',
    },
    {
        title: '插槽2',
    },
    {
        title: '插槽封装成品展示:登录隐私许可',
    }
    ])

    const dialog1 = ref();
    const dialog2 = ref();
    const dialog3 = ref();
    const dialog4 = ref();
    const dialog5 = ref();
    const dialog6 = ref();

    const handleClick = (e) => {
        switch (e + 1) {
            case 1:
                dialog1.value.open()
                break;
            case 2:
                dialog2.value.open()
                break;
            case 3:
                dialog3.value.open()
                break;
            case 4:
                dialog4.value.open()
                break;
            case 5:
                dialog5.value.open()
                break;
            case 6:
                dialog6.value.open()
                break;
            default:
                break;
        }
    }

    //弹窗回调
    const buttonBack = (e) => {
        dialog1.value.close()
        dialog2.value.close()
        dialog3.value.close()
        dialog4.value.close()
        dialog5.value.close()

        uni.showToast({
            icon: 'none',
            title: e
        })
    }

    const dialog6Button = (e) => {
        dialog6.value.close()

        uni.showToast({
            icon: 'none',
            title: e
        })
    }
</script>

<style lang="scss" scoped>
    .container {
        padding: 30rpx;
    }

    .button-group {
        display: flex;
        flex-wrap: wrap;
        gap: 20rpx;
    }

    .custom-btn {
        width: 100%;
        padding: 25rpx 0;
        margin-bottom: 20rpx;
        border-radius: 12rpx;
        background-color: #165DFF;
        color: white;
        font-size: 32rpx;
        text-align: center;
        border: none;
        outline: none;
    }
</style>