433 lines
13 KiB
Vue
433 lines
13 KiB
Vue
|
<template>
|
|||
|
|
<view>
|
|||
|
|
<u-popup
|
|||
|
|
v-model="popupValue"
|
|||
|
|
mode="center"
|
|||
|
|
:zoom="effectiveConfig.zoom"
|
|||
|
|
:popup="false"
|
|||
|
|
:z-index="uZIndex"
|
|||
|
|
:length="effectiveConfig.width"
|
|||
|
|
:mask-close-able="effectiveConfig.maskCloseAble"
|
|||
|
|
:border-radius="effectiveConfig.borderRadius"
|
|||
|
|
:negative-top="effectiveConfig.negativeTop"
|
|||
|
|
:custom-class="effectiveConfig.customClass"
|
|||
|
|
@close="popupClose"
|
|||
|
|
>
|
|||
|
|
<view class="u-model" :style="$u.toStyle(effectiveConfig.customStyle)">
|
|||
|
|
<view
|
|||
|
|
v-if="effectiveConfig.showTitle"
|
|||
|
|
class="u-model__title u-line-1"
|
|||
|
|
:style="$u.toStyle(effectiveConfig.titleStyle)"
|
|||
|
|
>
|
|||
|
|
{{ effectiveConfig.title }}
|
|||
|
|
</view>
|
|||
|
|
<view class="u-model__content">
|
|||
|
|
<view v-if="slots.default" :style="$u.toStyle(effectiveConfig.contentStyle)">
|
|||
|
|
<slot />
|
|||
|
|
</view>
|
|||
|
|
<view v-else class="u-model__content__message" :style="$u.toStyle(effectiveConfig.contentStyle)">
|
|||
|
|
<text>{{ effectiveConfig.content }}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view
|
|||
|
|
v-if="effectiveConfig.showCancelButton || effectiveConfig.showConfirmButton"
|
|||
|
|
class="u-model__footer u-border-top"
|
|||
|
|
>
|
|||
|
|
<view
|
|||
|
|
v-if="effectiveConfig.showCancelButton"
|
|||
|
|
:hover-stay-time="100"
|
|||
|
|
hover-class="u-model__btn--hover"
|
|||
|
|
class="u-model__footer__button"
|
|||
|
|
:style="$u.toStyle(cancelBtnStyle)"
|
|||
|
|
@tap="cancel"
|
|||
|
|
>
|
|||
|
|
{{ effectiveConfig.cancelText }}
|
|||
|
|
</view>
|
|||
|
|
<view
|
|||
|
|
v-if="effectiveConfig.showConfirmButton || slots['confirm-button']"
|
|||
|
|
class="u-model__footer__button hairline-left"
|
|||
|
|
:hover-stay-time="100"
|
|||
|
|
:hover-class="effectiveConfig.asyncClose ? 'none' : 'u-model__btn--hover'"
|
|||
|
|
:style="[confirmBtnStyle]"
|
|||
|
|
@tap="confirm"
|
|||
|
|
>
|
|||
|
|
<slot v-if="slots['confirm-button']" name="confirm-button"></slot>
|
|||
|
|
<template v-else>
|
|||
|
|
<u-loading mode="circle" :color="effectiveConfig.confirmColor" v-if="loading"></u-loading>
|
|||
|
|
<template v-else>
|
|||
|
|
{{ effectiveConfig.confirmText }}
|
|||
|
|
</template>
|
|||
|
|
</template>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</u-popup>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script lang="ts">
|
|||
|
|
export default {
|
|||
|
|
name: 'u-modal',
|
|||
|
|
options: {
|
|||
|
|
addGlobalClass: true,
|
|||
|
|
// #ifndef MP-TOUTIAO
|
|||
|
|
virtualHost: true,
|
|||
|
|
// #endif
|
|||
|
|
styleIsolation: 'shared'
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<script setup lang="ts">
|
|||
|
|
import { ref, computed, watch, onMounted, onBeforeUnmount, useSlots } from 'vue';
|
|||
|
|
import { $u } from '../..';
|
|||
|
|
import { ModalProps } from './types';
|
|||
|
|
import {
|
|||
|
|
U_MODAL_EVENT_CLEAR_LOADING,
|
|||
|
|
U_MODAL_EVENT_HIDE,
|
|||
|
|
U_MODAL_EVENT_SHOW,
|
|||
|
|
U_MODAL_GLOBAL_EVENT_CLEAR_LOADING,
|
|||
|
|
U_MODAL_GLOBAL_EVENT_HIDE,
|
|||
|
|
U_MODAL_GLOBAL_EVENT_SHOW,
|
|||
|
|
getEventWithCurrentPage,
|
|||
|
|
type ModalPayload
|
|||
|
|
} from './service';
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* modal 模态框
|
|||
|
|
* @description 弹出模态框，常用于消息提示、消息确认、在当前页面内完成特定的交互操作
|
|||
|
|
* @tutorial https://uviewpro.cn/zh/components/modal.html
|
|||
|
|
* @property {Boolean} value 是否显示模态框
|
|||
|
|
* @property {String | Number} z-index 层级
|
|||
|
|
* @property {String} title 模态框标题（默认"提示"）
|
|||
|
|
* @property {String | Number} width 模态框宽度（默认600）
|
|||
|
|
* @property {String} content 模态框内容（默认"内容"）
|
|||
|
|
* @property {Boolean} show-title 是否显示标题（默认true）
|
|||
|
|
* @property {Boolean} async-close 是否异步关闭，只对确定按钮有效（默认false）
|
|||
|
|
* @property {Boolean} show-confirm-button 是否显示确认按钮（默认true）
|
|||
|
|
* @property {String | Number} negative-top modal往上偏移的值
|
|||
|
|
* @property {Boolean} show-cancel-button 是否显示取消按钮（默认false）
|
|||
|
|
* @property {Boolean} mask-close-able 是否允许点击遮罩关闭modal（默认false）
|
|||
|
|
* @property {String} confirm-text 确认按钮的文字内容（默认"确认"）
|
|||
|
|
* @property {String} cancel-text 取消按钮的文字内容（默认"取消"）
|
|||
|
|
* @property {String} cancel-color 取消按钮的颜色（默认"var(--u-content-color)"）
|
|||
|
|
* @property {String} confirm-color 确认按钮的文字内容（默认主题色primary）
|
|||
|
|
* @property {String | Number} border-radius 模态框圆角值，单位rpx（默认16）
|
|||
|
|
* @property {Object} title-style 自定义标题样式，对象形式
|
|||
|
|
* @property {Object} content-style 自定义内容样式，对象形式
|
|||
|
|
* @property {Object} cancel-style 自定义取消按钮样式，对象形式
|
|||
|
|
* @property {Object} confirm-style 自定义确认按钮样式，对象形式
|
|||
|
|
* @property {Boolean} zoom 是否开启缩放模式（默认true）
|
|||
|
|
* @event {Function} confirm 确认按钮被点击
|
|||
|
|
* @event {Function} cancel 取消按钮被点击
|
|||
|
|
* @example <u-modal :src="title" :content="content"></u-modal>
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
const props = defineProps(ModalProps);
|
|||
|
|
const emit = defineEmits(['update:modelValue', 'confirm', 'cancel']);
|
|||
|
|
const slots = useSlots();
|
|||
|
|
|
|||
|
|
// 确认按钮是否正在加载中
|
|||
|
|
const loading = ref(false);
|
|||
|
|
const isGlobal = computed(() => !!props.global);
|
|||
|
|
const isPage = computed(() => !!props.page);
|
|||
|
|
const showEvent = computed(() =>
|
|||
|
|
isGlobal.value
|
|||
|
|
? U_MODAL_GLOBAL_EVENT_SHOW
|
|||
|
|
: isPage.value
|
|||
|
|
? getEventWithCurrentPage(U_MODAL_EVENT_SHOW, props.page)
|
|||
|
|
: ''
|
|||
|
|
);
|
|||
|
|
const hideEvent = computed(() =>
|
|||
|
|
isGlobal.value
|
|||
|
|
? U_MODAL_GLOBAL_EVENT_HIDE
|
|||
|
|
: isPage.value
|
|||
|
|
? getEventWithCurrentPage(U_MODAL_EVENT_HIDE, props.page)
|
|||
|
|
: ''
|
|||
|
|
);
|
|||
|
|
const clearLoadingEvent = computed(() =>
|
|||
|
|
isGlobal.value
|
|||
|
|
? U_MODAL_GLOBAL_EVENT_CLEAR_LOADING
|
|||
|
|
: isPage.value
|
|||
|
|
? getEventWithCurrentPage(U_MODAL_EVENT_CLEAR_LOADING, props.page)
|
|||
|
|
: ''
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
// 存储用户传入的回调函数
|
|||
|
|
let userOnConfirm: (() => void) | null = null;
|
|||
|
|
let userOnCancel: (() => void) | null = null;
|
|||
|
|
|
|||
|
|
// 需要与 effectiveConfig 合并的 props 键名列表（用于函数式调用）
|
|||
|
|
const MERGE_PROPS_KEYS = [
|
|||
|
|
'title',
|
|||
|
|
'content',
|
|||
|
|
'showTitle',
|
|||
|
|
'showConfirmButton',
|
|||
|
|
'showCancelButton',
|
|||
|
|
'confirmText',
|
|||
|
|
'cancelText',
|
|||
|
|
'confirmColor',
|
|||
|
|
'cancelColor',
|
|||
|
|
'confirmStyle',
|
|||
|
|
'cancelStyle',
|
|||
|
|
'titleStyle',
|
|||
|
|
'contentStyle',
|
|||
|
|
'asyncClose',
|
|||
|
|
'borderRadius',
|
|||
|
|
'width',
|
|||
|
|
'zoom',
|
|||
|
|
'maskCloseAble',
|
|||
|
|
'negativeTop',
|
|||
|
|
'zIndex',
|
|||
|
|
'customStyle',
|
|||
|
|
'customClass'
|
|||
|
|
] as const;
|
|||
|
|
|
|||
|
|
// 函数式调用时的临时配置
|
|||
|
|
const tempConfig = ref<Partial<ModalPayload>>({});
|
|||
|
|
|
|||
|
|
// 函数式调用时的内部显示状态（用于 global 模式）
|
|||
|
|
const internalShow = ref(false);
|
|||
|
|
|
|||
|
|
// 有效的配置（函数式调用时合并 tempConfig 和 props，v-model 时使用 props）
|
|||
|
|
const effectiveConfig = computed(() => {
|
|||
|
|
// 如果有临时配置（函数式调用），合并用户配置与 props 默认值
|
|||
|
|
if (Object.keys(tempConfig.value).length > 0) {
|
|||
|
|
const result: Record<string, any> = {};
|
|||
|
|
for (const key of MERGE_PROPS_KEYS) {
|
|||
|
|
// 用户配置优先，否则使用 props 默认值
|
|||
|
|
result[key] = (tempConfig.value as Record<string, any>)[key] ?? (props as Record<string, any>)[key];
|
|||
|
|
}
|
|||
|
|
result.zIndex = tempConfig.value.zIndex ?? props.zIndex ?? $u.zIndex.popup;
|
|||
|
|
return result;
|
|||
|
|
}
|
|||
|
|
// v-model 直接控制时使用 props
|
|||
|
|
return props;
|
|||
|
|
});
|
|||
|
|
// 取消按钮样式
|
|||
|
|
const cancelBtnStyle = computed(() => {
|
|||
|
|
return Object.assign({ color: effectiveConfig.value.cancelColor }, effectiveConfig.value.cancelStyle);
|
|||
|
|
});
|
|||
|
|
// 确认按钮样式
|
|||
|
|
const confirmBtnStyle = computed(() => {
|
|||
|
|
return Object.assign({ color: effectiveConfig.value.confirmColor }, effectiveConfig.value.confirmStyle);
|
|||
|
|
});
|
|||
|
|
// 弹窗的样式
|
|||
|
|
const uZIndex = computed(() => effectiveConfig.value.zIndex ?? $u.zIndex.popup);
|
|||
|
|
// 是否使用内部状态控制显示（global 模式）
|
|||
|
|
const useInternalShow = computed(() => isGlobal.value || isPage.value);
|
|||
|
|
// 最终显示状态
|
|||
|
|
const finalShow = computed(() => {
|
|||
|
|
if (useInternalShow.value) {
|
|||
|
|
return internalShow.value;
|
|||
|
|
}
|
|||
|
|
return props.modelValue;
|
|||
|
|
});
|
|||
|
|
// u-popup 绑定的值
|
|||
|
|
const popupValue = computed({
|
|||
|
|
get: () => finalShow.value,
|
|||
|
|
set: (val: boolean) => {
|
|||
|
|
if (useInternalShow.value) {
|
|||
|
|
internalShow.value = val;
|
|||
|
|
} else {
|
|||
|
|
emit('update:modelValue', val);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 如果是异步关闭时，外部修改v-model的值为false时，重置内部的loading状态，避免下次打开的时候，状态混乱
|
|||
|
|
watch(
|
|||
|
|
() => popupValue.value,
|
|||
|
|
n => {
|
|||
|
|
if (n === true) loading.value = false;
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 确认按钮点击事件
|
|||
|
|
*/
|
|||
|
|
function confirm() {
|
|||
|
|
// 先调用回调，再重置配置
|
|||
|
|
const onConfirm = userOnConfirm;
|
|||
|
|
// 异步关闭
|
|||
|
|
if (effectiveConfig.value.asyncClose) {
|
|||
|
|
loading.value = true;
|
|||
|
|
} else {
|
|||
|
|
popupValue.value = false;
|
|||
|
|
// 延迟重置配置，避免闪屏
|
|||
|
|
setTimeout(() => resetTempConfig(), 300);
|
|||
|
|
}
|
|||
|
|
emit('confirm');
|
|||
|
|
// 调用函数式调用时用户传入的回调
|
|||
|
|
onConfirm?.();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 取消按钮点击事件
|
|||
|
|
*/
|
|||
|
|
function cancel() {
|
|||
|
|
// 先调用回调，再重置配置
|
|||
|
|
const onCancel = userOnCancel;
|
|||
|
|
// 延迟重置配置，避免闪屏
|
|||
|
|
setTimeout(() => resetTempConfig(), 300);
|
|||
|
|
emit('cancel');
|
|||
|
|
popupValue.value = false;
|
|||
|
|
// 调用函数式调用时用户传入的回调
|
|||
|
|
onCancel?.();
|
|||
|
|
// 目前popup弹窗关闭有一个延时操作，此处做一个延时
|
|||
|
|
// 避免确认按钮文字变成了"确定"字样，modal还没消失，造成视觉不好的效果
|
|||
|
|
setTimeout(() => {
|
|||
|
|
loading.value = false;
|
|||
|
|
}, 300);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 点击遮罩关闭modal，设置v-model的值为false，否则无法第二次弹起modal
|
|||
|
|
*/
|
|||
|
|
function popupClose() {
|
|||
|
|
popupValue.value = false;
|
|||
|
|
resetTempConfig();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 清除加载中的状态
|
|||
|
|
*/
|
|||
|
|
function clearLoading() {
|
|||
|
|
loading.value = false;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 函数式调用显示 modal
|
|||
|
|
*/
|
|||
|
|
function onServiceShow(payload: ModalPayload) {
|
|||
|
|
// 保存回调函数
|
|||
|
|
userOnConfirm = payload.onConfirm ?? null;
|
|||
|
|
userOnCancel = payload.onCancel ?? null;
|
|||
|
|
|
|||
|
|
// 只保存用户传入的配置（过滤掉回调）
|
|||
|
|
const { onConfirm, onCancel, ...rest } = payload;
|
|||
|
|
tempConfig.value = rest;
|
|||
|
|
|
|||
|
|
// 使用内部状态控制显示
|
|||
|
|
internalShow.value = true;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 函数式调用关闭 modal
|
|||
|
|
*/
|
|||
|
|
function onServiceHide() {
|
|||
|
|
internalShow.value = false;
|
|||
|
|
resetTempConfig();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 重置临时配置
|
|||
|
|
*/
|
|||
|
|
function resetTempConfig() {
|
|||
|
|
tempConfig.value = {};
|
|||
|
|
userOnConfirm = null;
|
|||
|
|
userOnCancel = null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 开始监听事件
|
|||
|
|
function startListeners() {
|
|||
|
|
// 如果为全局 toast，则先移除所有事件监听，再重新监听
|
|||
|
|
if (isGlobal.value) {
|
|||
|
|
removeAllListeners();
|
|||
|
|
}
|
|||
|
|
if (showEvent.value) {
|
|||
|
|
uni?.$on && uni.$on(showEvent.value, onServiceShow);
|
|||
|
|
}
|
|||
|
|
if (hideEvent.value) {
|
|||
|
|
uni?.$on && uni.$on(hideEvent.value, onServiceHide);
|
|||
|
|
}
|
|||
|
|
if (clearLoadingEvent.value) {
|
|||
|
|
uni?.$on && uni.$on(clearLoadingEvent.value, clearLoading);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 停止监听事件
|
|||
|
|
function stopListeners() {
|
|||
|
|
if (showEvent.value) {
|
|||
|
|
uni?.$off && uni.$off(showEvent.value, onServiceShow);
|
|||
|
|
}
|
|||
|
|
if (hideEvent.value) {
|
|||
|
|
uni?.$off && uni.$off(hideEvent.value, onServiceHide);
|
|||
|
|
}
|
|||
|
|
if (clearLoadingEvent.value) {
|
|||
|
|
uni?.$off && uni.$off(clearLoadingEvent.value, clearLoading);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 移除所有事件监听
|
|||
|
|
function removeAllListeners() {
|
|||
|
|
if (showEvent.value) {
|
|||
|
|
uni?.$off && uni.$off(showEvent.value);
|
|||
|
|
}
|
|||
|
|
if (hideEvent.value) {
|
|||
|
|
uni?.$off && uni.$off(hideEvent.value);
|
|||
|
|
}
|
|||
|
|
if (clearLoadingEvent.value) {
|
|||
|
|
uni?.$off && uni.$off(clearLoadingEvent.value);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
onMounted(() => {
|
|||
|
|
startListeners();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
onBeforeUnmount(() => {
|
|||
|
|
stopListeners();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
defineExpose({
|
|||
|
|
clearLoading
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
@import '../../libs/css/style.components.scss';
|
|||
|
|
|
|||
|
|
.u-model {
|
|||
|
|
height: auto;
|
|||
|
|
overflow: hidden;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
background-color: var(--u-bg-white);
|
|||
|
|
|
|||
|
|
&__btn--hover {
|
|||
|
|
background-color: rgb(230, 230, 230);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&__title {
|
|||
|
|
padding-top: 48rpx;
|
|||
|
|
font-weight: 500;
|
|||
|
|
text-align: center;
|
|||
|
|
color: $u-main-color;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&__content {
|
|||
|
|
&__message {
|
|||
|
|
padding: 48rpx;
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
color: $u-content-color;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&__footer {
|
|||
|
|
@include vue-flex;
|
|||
|
|
|
|||
|
|
&__button {
|
|||
|
|
flex: 1;
|
|||
|
|
height: 100rpx;
|
|||
|
|
line-height: 100rpx;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
cursor: pointer;
|
|||
|
|
text-align: center;
|
|||
|
|
border-radius: 4rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|