FarmingWx_V2_message/TUIKit/components/common/BottomPopup/index.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>