160 lines
4.1 KiB
Vue
160 lines
4.1 KiB
Vue
|
<!--
|
|||
|
移动端 底部弹出对话框 组件
|
|||
|
- 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>
|