music-score/src/page-instrument/view-figner/guide/finger-guide.tsx

import { defineComponent, onMounted, reactive, ref } from "vue";
import styles from "./index.module.less";
import { Button, Icon, Popup } from "vant";
import icons from "./image/icons.json";
import state from "/src/state";
import { getQuery } from "/src/utils/queryString";

export default defineComponent({
  name: "DetailGuide",
  props: {
    fingeringMode: {
      type: String,
      default: "",
    },
  },
  emits: ["close"],
  setup(props, { emit }) {
    const query = getQuery();
    const data = reactive({
      box: {},
      show: true,
      steps: [
        {
          className: "boxItem1",
          classTip: "",
          des: `快点击下排按钮听听${state.fingeringInfo.code}的声音吧，按钮可以滑动哦～`,
          img: icons.icon_cursor_1,
        },
        {
          className: "boxItem2",
          classTip: "boxTip2",
          des: "这里可以切换音调，查看不同音调的指法～",
          img: icons.icon_cursor_2,
        },
        {
          className: "boxItem3",
          classTip: "boxTip3",
          des: "可以通过手势放大缩小乐器哦～",
          img: icons.icon_cursor_3,
        },
      ],
      step: 0,
    });
    const steps = ["finger-note-0", "finger-note-1", "finger-note-2"];
    const getStepELe = () => {
      const ele: HTMLElement = document.getElementById(steps[data.step])!;
      console.log(data.step, ele);
      if (ele) {
        const eleRect = ele.getBoundingClientRect();
        const increment = data.step === 2 ? eleRect.width : 0;
        data.box = {
          left: eleRect.x - increment + "px",
          top: eleRect.y + "px",
          width: (data.step === 2 ? 0 : eleRect.width) + "px",
          height: (data.step === 2 ? 0 : eleRect.height) + "px",
        };
      } else {
        handleNext();
      }
    };
    onMounted(() => {
      getStepELe();
    });

    const handleNext = () => {
      if (data.step >= 2) {
        endGuide();
        return;
      }
      data.step = data.step + 1;
      getStepELe();
    };

    const endGuide = () => {
      emit("close", true);
    };
    return () => (
      <Popup zIndex={5051} teleport="body" overlay={false} closeOnClickOverlay={false} class={["popup-custom", styles.fingerGuide]} v-model:show={data.show}>
        <div class={styles.content} onClick={() => handleNext()}>
          <div class={styles.box} style={data.box}>
            {data.steps.map((item, index) => (
              <div style={{ display: index === data.step ? "" : "none" }} class={styles[item.className]}>
                <img src={item.img} />
              </div>
            ))}
          </div>
          <div onClick={(e: Event) => e.stopPropagation()}>
            {data.steps.map((item, index) => (
              <div style={{ display: index === data.step ? "" : "none" }} class={[styles.item, props.fingeringMode !== "scaleMode" && styles.fingeringMode, ["Woodwind", "Tenor Recorder", "BaroqueRecorder"].includes(query.code) && styles.itemScale, styles[item.classTip]]}>
                <div class={styles.icon}>
                  <img src={icons.guide_3} />
                </div>
                <Button class={styles.btn} round type="primary" onClick={() => handleNext()}>
                  我知道了
                </Button>
                <div class={styles.title}>
                  <img src={icons.guide_4} />
                  <div class={styles.des} style={{ fontSize: index === 2 ? "0.34667rem" : "" }}>
                    {item.des}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </Popup>
    );
  },
});