123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160 |
- <!--
- 移动端 底部弹出对话框 组件
- - 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>
|