music-score/src/view/fingering/index.tsx

import { computed, defineComponent, onBeforeMount, reactive } from "vue";
import styles from "./index.module.less";
import state from "/src/state";
import { getFingeringConfig, ITypeFingering } from "./fingering-config";

export default defineComponent({
	name: "fingering",
	emits: ["open"],
	setup(props, { emit }) {
		const fingerData = reactive({
			relationshipIndex: 0,
			subject: null as unknown as ITypeFingering,
			delay: 0,
		});
		const getFingeringData = async () => {
			fingerData.subject = await getFingeringConfig(state.fingeringInfo.name);
		};
		onBeforeMount(() => {
			getFingeringData();
		});

		/** 当前音域 */
		const realKey = computed(() => {
			return state.times[state.activeNoteIndex]?.realKey || -1;
		});

		const doubeClick = () => {
			const nowTime = Date.now();
			if (nowTime - fingerData.delay < 300) {
				emit("open");
				return;
			}
			fingerData.delay = nowTime;
		};
		return () => {
			// console.log("音高", realKey.value);
			const relationship = fingerData.subject?.relationship?.[realKey.value] || [];
			const rs: number[] = Array.isArray(relationship[1])
				? relationship[fingerData.relationshipIndex]
				: relationship;
			const canTizhi = Array.isArray(relationship[1]);
			return (
				<>
					{state.fingeringInfo.direction === "transverse" ? (
						<div onClick={() => doubeClick()} class={[styles.fingeringContainer]}>
							<span class={[styles.yidiao, rs.includes(0) && styles.canDisplay]}>转调</span>

							<div class={styles.imgs}>
								<img src={fingerData.subject?.json?.full} />
								{rs.map((key: number | string, index: number) => {
									const nk: string = typeof key === "string" ? key.replace("active-", "") : String(key);
									return <img data-index={nk} src={fingerData.subject?.json?.[nk]} />;
								})}
							</div>

							{state.fingeringInfo.hasTizhi && (
								<div
									class={[styles.tizhi, canTizhi && styles.canDisplay]}
									onClick={() =>
										(fingerData.relationshipIndex = fingerData.relationshipIndex === 0 ? 1 : 0)
									}
								>
									替指
								</div>
							)}
						</div>
					) : (
						<div
							onClick={() => doubeClick()}
							class={[styles.fingeringContainer, styles.vertical, state.fingeringInfo.name]}
						>
							<div class={styles.imgs} style={{ transform: state.fingeringInfo.transform }}>
								<img src={fingerData.subject?.json?.full} />
								{rs.map((key: number | string, index: number) => {
									const nk: string = typeof key === "string" ? key.replace("active-", "") : String(key);
									return <img data-index={nk} src={fingerData.subject?.json?.[nk]} />;
								})}
							</div>

							{state.fingeringInfo.hasTizhi && (
								<div
									style={{ display: state.fingeringInfo.disabledFinger ? "none" : "" }}
									class={styles.rightContent}
								>
									<span class={[styles.yidiao, rs.includes(0) && styles.canDisplay]}>转调</span>
									<div
										class={[styles.tizhi, canTizhi && styles.canDisplay]}
										onClick={() =>
											(fingerData.relationshipIndex = fingerData.relationshipIndex === 0 ? 1 : 0)
										}
									>
										替指
									</div>
								</div>
							)}
						</div>
					)}
				</>
			);
		};
	},
});