jiuyiUniapp/jiuyi/node_modules/@tencentcloud/chat-uikit-uniapp/components/common/BottomPopup/index.vue

160 lines
4.1 KiB
Vue
Raw Normal View History

2024-12-18 15:46:27 +08:00
<!--
移动端 底部弹出对话框 组件
- pc 仅展示插槽内容无弹出对话框无对话框相关 header footer
- mobile 底部弹出对话框支持 对话框相关 header footer 定制展示详情请参见参数列表
-->
<template>
<div v-if="props.show">
<div
v-if="!isPC"
:class="[
'bottom-popup',
isUniFrameWork && 'bottom-popup-uni',
!isPC && 'bottom-popup-h5',
!isPC && props.modal && 'bottom-popup-modal',
]"
@click="closeBottomPopup"
>
<div
ref="dialogRef"
:class="['bottom-popup-main', !isPC && 'bottom-popup-h5-main']"
:style="{
height: props.height,
borderTopLeftRadius: props.borderRadius,
borderTopRightRadius: props.borderRadius,
}"
@click.stop
>
<div
v-if="title || showHeaderCloseButton"
class="header"
>
<div
v-if="title"
class="header-title"
>
{{ title }}
</div>
<div
v-if="showHeaderCloseButton"
class="header-close"
@click="closeBottomPopup"
>
{{ TUITranslateService.t("关闭") }}
</div>
</div>
<slot />
<div
v-if="showFooterSubmitButton"
class="footer"
>
<div
class="footer-submit"
@click="submit"
>
{{ submitButtonContent }}
</div>
</div>
</div>
</div>
<slot v-else />
</div>
</template>
<script setup lang="ts">
import { ref, watch, nextTick } from '../../../adapter-vue';
import { TUITranslateService } from '@tencentcloud/chat-uikit-engine';
import { outsideClick } from '@tencentcloud/universal-api';
import { isPC, isH5, isUniFrameWork } from '../../../utils/env';
const props = defineProps({
// Whether to display the bottom pop-up dialog box
show: {
type: Boolean,
default: false,
},
// Whether a mask layer is required, the default is true
modal: {
type: Boolean,
default: true,
},
// Popup box content area height (excluding mask), default is fit-content
height: {
type: String,
default: 'fit-content',
},
// Whether the pop-up dialog box can be closed by clicking outside, the default is true
// uniapp only supports closing the pop-up dialog box by clicking the mask
closeByClickOutside: {
type: Boolean,
default: true,
},
// The rounded angle of the top border corners is 0px by default, i.e. right angle by default
borderRadius: {
type: String,
default: '0px',
},
title: {
type: String,
default: '',
},
// Whether to display the top close button, not displayed by default
showHeaderCloseButton: {
type: Boolean,
default: false,
},
// Whether to display the submit button at the bottom, not displayed by default
showFooterSubmitButton: {
type: Boolean,
default: false,
},
// Bottom submit button text, only valid when showFooterSubmitButton is true
submitButtonContent: {
type: String,
default: () => TUITranslateService.t('确定'),
},
});
const emits = defineEmits(['onOpen', 'onClose', 'onSubmit']);
const dialogRef = ref();
watch(
() => props.show,
(newVal: boolean, oldVal: boolean) => {
if (newVal === oldVal) {
return;
}
switch (newVal) {
case true:
emits('onOpen', dialogRef);
nextTick(() => {
// Effective under web h5
if (isH5 && !isUniFrameWork) {
if (props.closeByClickOutside) {
outsideClick.listen({
domRefs: dialogRef.value,
handler: closeBottomPopup,
});
}
}
});
break;
case false:
emits('onClose', dialogRef);
break;
}
},
);
const closeBottomPopup = () => {
if (isUniFrameWork || isH5) {
emits('onClose', dialogRef);
}
};
const submit = () => {
emits('onSubmit');
closeBottomPopup();
};
</script>
<style scoped lang="scss" src="./style/index.scss"></style>