music-score/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",
    });

    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;
      // 引导页出现在下边
      if (pageHeight - dragTop > guideHeight) {
        data.guidePos = "bottom"
      } else {
        // 引导页出现在左边or右边
        data.guidePos = dragLeft > guideWidth ? "left" : "right"
      }
    }
    onMounted(() => {
      setTimeout(() => {
        initGuidePos();
      }, 0);
    });
    return () => (
      <>
      <div class={[styles.dragbomBox,"dragbomBox"]}>
        <div class={[styles.dragBom, 'bom_drag']}>
          <div class={styles.box}></div>
          <div class={[styles.box, styles.right]}></div>
        </div>
      </div>
        {
          props.showGuide && 
          <div class={[styles.guide, data.guidePos === "left" && styles.guideLeft, data.guidePos === "right" && styles.guideRight, 'bom_guide']} onClick={() => emit("guideDone")}>
            <div class={styles.guideBg}></div>
            <div class={styles.guideDone} onClick={(e) => {e.stopPropagation();emit("guideDone")}}></div>
          </div>          
        }

      </>
    );
  }
});