btnTxt.vue 587 B

1234567891011121314151617181920212223242526272829303132333435
  1. <template>
  2. <text class="my-button"
  3. :class="{active: btnStatus}"
  4. @touchstart="handleTouchStart"
  5. @touchend="handleTouchEnd">
  6. <slot></slot>
  7. </text>
  8. </template>
  9. <script setup>
  10. import {
  11. ref
  12. } from "vue"
  13. // 按下状态
  14. const btnStatus = ref(false)
  15. const emits = defineEmits(['text-select'])
  16. // 按下
  17. function handleTouchStart() {
  18. btnStatus.value = true // 按下变红色
  19. }
  20. // 松开
  21. function handleTouchEnd() {
  22. btnStatus.value = false // 松开恢复蓝色
  23. emits('text-select')
  24. }
  25. </script>
  26. <style lang="scss" scoped>
  27. .active {
  28. color: red;
  29. }
  30. </style>