更新记录
1.0(2025-07-11)
下载此版本
无
平台兼容性
uni-app(4.11)
Vue2 |
Vue3 |
Chrome |
Safari |
app-vue |
app-nvue |
Android |
iOS |
鸿蒙 |
- |
√ |
- |
- |
- |
- |
- |
- |
- |
微信小程序 |
支付宝小程序 |
抖音小程序 |
百度小程序 |
快手小程序 |
京东小程序 |
鸿蒙元服务 |
QQ小程序 |
飞书小程序 |
快应用-华为 |
快应用-联盟 |
- |
- |
- |
- |
- |
- |
- |
- |
- |
- |
- |
uni-app x(4.11)
Chrome |
Safari |
Android |
iOS |
鸿蒙 |
微信小程序 |
- |
- |
- |
- |
- |
- |
完整示例
<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>