classroom-app/src/hooks/useDrag/dragbom.tsx

import { defineComponent, computed, reactive, onMounted } from 'vue';
import styles from './index.module.less';
// 底部拖动区域
export default defineComponent({
  name: 'dragBom',
  emits: ['guideDone'],
  props: {
    /** 是否显示引导 */
    showGuide: {
      type: Boolean,
      default: false
    }
  },
  setup(props, { emit }) {
    const data = reactive({
      guidePos: 'bottom' as 'bottom' | 'left' | 'right' | 'middle'
    });

    const initGuidePos = () => {
      const pageHeight =
        document.documentElement.clientHeight || document.body.clientHeight;
      const pageWidth =
        document.documentElement.clientWidth || document.body.clientWidth;
      const guideHeight =
        document.querySelector('.bom_guide')?.clientHeight || 0;
      const guideWidth = document.querySelector('.bom_guide')?.clientWidth || 0;
      const dragBBox = document
        .querySelector('.bom_drag')
        ?.getBoundingClientRect();
      const dragTop = dragBBox?.top || 0;
      const dragLeft = dragBBox?.left || 0;
      const dragRight = dragBBox?.right || 0;
      // console.log(dragTop, dragBBox, pageHeight, guideHeight);
      // 引导页出现在下边
      if (pageHeight - dragTop > guideHeight) {
        data.guidePos = 'bottom';
      } else {
        // 引导页出现在左边or右边
        if (dragLeft > guideWidth) {
          data.guidePos = 'left';
        } else if (pageWidth - dragRight > guideWidth) {
          data.guidePos = 'right';
        } else {
          data.guidePos = 'middle';
        }
        // data.guidePos = dragLeft > guideWidth ? 'left' : 'right';
      }
      data.guidePos = 'middle';
      // console.log(data.guidePos, '121212');
    };
    onMounted(() => {
      setTimeout(() => {
        initGuidePos();
      }, 0);
    });
    return () => (
      <>
        <div class={[styles.dragBom, 'bom_drag']}>
          <div class={[styles.box, 'bom_drag_point']}></div>
          <div class={[styles.box, 'bom_drag_point_right', styles.right]}></div>
        </div>
        {props.showGuide && (
          <div
            class={[
              styles.guide,
              data.guidePos === 'left' && styles.guideLeft,
              data.guidePos === 'right' && styles.guideRight,
              data.guidePos === 'middle' && styles.guidemiddle,
              'bom_guide'
            ]}
            onClick={() => emit('guideDone')}>
            <div class={styles.guideBg}></div>
            <div
              class={styles.guideDone}
              onClick={e => {
                e.stopPropagation();
                emit('guideDone');
              }}></div>
          </div>
        )}
      </>
    );
  }
});