music-score/src/page-instrument/header-top/speed/index.tsx

import { computed, defineComponent, ref, watch } from "vue";
import { Switch, Slider } from "vant";
import styles from "./index.module.less"
import { headData } from "../index" 
import { headImg } from "../image";
import state, { handleSetSpeed, resetBaseRate } from "../../../state";
import { metronomeData } from "../../../helpers/metronome"; 

export default defineComponent({
	name: "speed",
	setup() {
		const speed = ref(state.speed);

		const minusSpeed = () => {
			let canSpeed = Math.max(speed.value - 1, 45);
			canSpeed = Math.min(canSpeed, 270);
			speed.value = canSpeed;
		};

		const plusSpeed = () => {
			let canSpeed = Math.min(speed.value + 1, 270);
			canSpeed = Math.max(canSpeed, 45);
			speed.value = canSpeed;
		};
		// 重置当前小节的速度
		const resetCurrentSpeed = () => {
			resetBaseRate(state.activeNoteIndex);
		};
		watch(
			() => speed.value,
			() => {
				// handleSetSpeed(speed.value);
				state.speed = Math.floor(speed.value);
			}
		);
		watch(
			() => state.speed,
			() => {
				if (speed.value !== state.speed) {
					speed.value = state.speed;
				}
			}
		);
		const metronomeDisable = computed({
			get(){
				return !metronomeData.disable
			},
			set(val){
				metronomeData.disable = !val
			}
		})
		return () => (
			<div class={[styles.speedContainer, styles[state.modeType]]}>
				<div class={styles.head}>
					<img class={styles.headTit} src={headImg("headTit.png")} />
					<img class={styles.closeImg} src={headImg("closeImg.png")} onClick={()=>{ headData.speedShow = false }} />
				</div>
				<div class={styles.content}>
					<div class={styles.conBox}>
						<div class={styles.tit}>速度</div>
						<div class={styles.spendCon}>
							<img src={headImg("cutImg.png")} class={[styles.btn]} onClick={minusSpeed} />
							<div class={styles.sliderCon}>
								<Slider class={styles.slider} max={270} min={speed.value < 45 ? speed.value : 45} v-model={speed.value}>
									{{
										button: () => 
										<div class={styles.customButton}>
											<div class={styles.speedVal}>{ Math.floor(speed.value) }</div>
											<div class={styles.speedBtn}></div>
										</div>
									}}
								</Slider>
							</div>
							<img src={headImg("addImg.png")} class={[styles.btn]} onClick={plusSpeed} />	
						</div>
						<div class={styles.speedSel}>
							<div onClick={resetCurrentSpeed}>原速</div>
							<div onClick={()=>{ speed.value = 70 }}>70</div>
							<div onClick={()=>{ speed.value = 80 }}>80</div>
							<div onClick={()=>{ speed.value = 90 }}>90</div>
							<div onClick={()=>{ speed.value = 100 }}>100</div>
							<div onClick={()=>{ speed.value = 110 }}>110</div>
						</div>
						<div class={styles.metronome}>
							<div class={styles.tit}>节拍器</div>
							<Switch v-model={metronomeDisable.value}></Switch>
						</div>
					</div>
				</div>
			</div>
		);
	},
});