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",
	emits: ["close"],
	setup(props, { emit }) {
		const query = getQuery();
		const data = reactive({
			box: {},
			show: true,
			steps: [
				{
					className: "boxItem1",
					des: `快点击下排按钮听听${state.fingeringInfo.code}的声音吧，按钮可以滑动哦～`,
					img: icons.icon_cursor_1,
				},
				{
					className: "boxItem2",
					des: "这里可以切换音调，查看不同音调的指法～",
					img: icons.icon_cursor_2,
				},
				{
					className: "boxItem3",
					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
				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, ['Woodwind', 'Tenor Recorder'].includes(query.code) && styles.itemScale]}>
								<div class={styles.title}>
									<img src={icons.guide_2} />
									<div class={styles.des} style={{fontSize: index === 2 ? '0.34667rem' : ''}}>
										{item.des}
									</div>
								</div>
								<div class={styles.icon}>
									<img src={icons.guide_1} />
								</div>
								<Button class={styles.btn} round type="primary" onClick={() => handleNext()}>
									我知道了
								</Button>
							</div>
						))}
					</div>
				</div>
			</Popup>
		);
	},
});