uniProject/pages/chaojidanci/newEnglish/components/btnTxt.vue

<template>
	<ezyActiveVue class="ezy-btn-active keyboard-button" 
		:class="{active: btnStatus}" 
		@touchstart="handleTouchStart"
		@touchend="handleTouchEnd">
		<slot></slot>
	</ezyActiveVue>
</template>

<script setup>
	import ezyActiveVue from "@/components/ezyActive/ezyActive.vue";
	import {
		ref
	} from "vue"

	// 按下状态
	const btnStatus = ref(false)
	
	const emits = defineEmits(['text-select', 'touch-start','touch-end'])

	// 按下
	function handleTouchStart() {
		btnStatus.value = true // 按下变红色
		emits('touch-start')
	}
	// 松开
	function handleTouchEnd() {
		btnStatus.value = false // 松开恢复蓝色
		emits('text-select')
	}
</script>

<style lang="scss" scoped>
	.active {
		color: red;
	}
</style>