116 lines
2.8 KiB
Vue
116 lines
2.8 KiB
Vue
|
<template>
|
||
|
|
<uni-popup ref="popup" type="dialog" mask-background-color="rgba(0,0,0,0.5)" @change="onPopupChange">
|
||
|
|
<view class="global-confirm-wrapper">
|
||
|
|
<uni-popup-dialog
|
||
|
|
mode="base"
|
||
|
|
:type="state.type"
|
||
|
|
:title="state.title"
|
||
|
|
:content="state.content"
|
||
|
|
:before-close="true"
|
||
|
|
@confirm="onConfirm"
|
||
|
|
@close="onClose"
|
||
|
|
></uni-popup-dialog>
|
||
|
|
</view>
|
||
|
|
</uni-popup>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { ref, reactive, onMounted, onUnmounted } from 'vue';
|
||
|
|
|
||
|
|
const popup = ref(null);
|
||
|
|
const state = reactive({
|
||
|
|
title: '',
|
||
|
|
content: '',
|
||
|
|
type: 'info',
|
||
|
|
resolve: null,
|
||
|
|
});
|
||
|
|
|
||
|
|
onMounted(() => {
|
||
|
|
uni.$on('show-global-popup', (options) => {
|
||
|
|
state.title = options.title || '提示';
|
||
|
|
state.content = options.content || '';
|
||
|
|
state.type = options.type || 'info';
|
||
|
|
state.resolve = options.resolve;
|
||
|
|
popup.value.open();
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
onUnmounted(() => {
|
||
|
|
uni.$off('show-global-popup');
|
||
|
|
});
|
||
|
|
|
||
|
|
const onConfirm = () => {
|
||
|
|
if (state.resolve) state.resolve(true);
|
||
|
|
popup.value.close();
|
||
|
|
};
|
||
|
|
|
||
|
|
const onClose = () => {
|
||
|
|
if (state.resolve) state.resolve(false);
|
||
|
|
popup.value.close();
|
||
|
|
};
|
||
|
|
|
||
|
|
const onPopupChange = (e) => {
|
||
|
|
if (!e.show && state.resolve) {
|
||
|
|
state.resolve(false);
|
||
|
|
state.resolve = null;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.global-confirm-wrapper {
|
||
|
|
/* 整个弹窗容器宽度自适应 */
|
||
|
|
width: 600rpx;
|
||
|
|
|
||
|
|
/* 深度覆盖 uni-popup-dialog 内置样式 */
|
||
|
|
:deep(.uni-popup-dialog) {
|
||
|
|
width: 600rpx !important;
|
||
|
|
background-color: #fff;
|
||
|
|
border-radius: 24rpx;
|
||
|
|
|
||
|
|
/* 标题部分 */
|
||
|
|
.uni-dialog-title {
|
||
|
|
padding: 40rpx 0 20rpx;
|
||
|
|
.uni-dialog-title-text {
|
||
|
|
font-size: 36rpx;
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 内容部分 */
|
||
|
|
.uni-dialog-content {
|
||
|
|
padding: 20rpx 40rpx 40rpx;
|
||
|
|
.uni-dialog-content-text {
|
||
|
|
font-size: 30rpx;
|
||
|
|
color: #666;
|
||
|
|
line-height: 1.5;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 底部按钮组 */
|
||
|
|
.uni-dialog-button-group {
|
||
|
|
height: 100rpx;
|
||
|
|
border-top: 1rpx solid #f0f0f0;
|
||
|
|
|
||
|
|
.uni-dialog-button {
|
||
|
|
height: 100%;
|
||
|
|
/* 每个按钮的样式 */
|
||
|
|
.uni-dialog-button-text {
|
||
|
|
font-size: 32rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 确定按钮颜色（通常是蓝色或主题色） */
|
||
|
|
.uni-button-color {
|
||
|
|
color: #007aff;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 按钮中间的分割线 */
|
||
|
|
.uni-border-left {
|
||
|
|
border-left: 1rpx solid #f0f0f0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|