瀏覽代碼

update 选 拼

wangxy 3 月之前
父節點
當前提交
9c98842b57
共有 1 個文件被更改,包括 35 次插入0 次删除
  1. 35 0
      pages/newEnglish/components/btnTxt.vue

+ 35 - 0
pages/newEnglish/components/btnTxt.vue

@@ -0,0 +1,35 @@
+<template>
+	<text class="my-button" 
+		:class="{active: btnStatus}" 
+		@touchstart="handleTouchStart"
+		@touchend="handleTouchEnd">
+		<slot></slot>
+	</text>
+</template>
+
+<script setup>
+	import {
+		ref
+	} from "vue"
+
+	// 按下状态
+	const btnStatus = ref(false)
+	
+	const emits = defineEmits(['text-select'])
+
+	// 按下
+	function handleTouchStart() {
+		btnStatus.value = true // 按下变红色
+	}
+	// 松开
+	function handleTouchEnd() {
+		btnStatus.value = false // 松开恢复蓝色
+		emits('text-select')
+	}
+</script>
+
+<style lang="scss" scoped>
+	.active {
+		color: red;
+	}
+</style>