|
@@ -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>
|