liveh5-nuxt/app/components/x-button/index.vue

<script setup>
/*
* 此组件的目的是使用该组件包裹的内容具有按压状态效果
* */
import {ref, defineEmits} from "vue";

const emit = defineEmits(["click"]);

const isButtonActive = ref(false);

const handleButtonPress = () => {
  isButtonActive.value = true;
};
const handleButtonRelease = () => {
  isButtonActive.value = false;
  emit("click")
};
</script>
<template>
  <div
      :class="[
      'transition-all duration-200',
      isButtonActive ? 'scale-95' : ''
    ]"
      @touchstart="handleButtonPress"
      @touchend="handleButtonRelease"
  >
    <slot></slot>
  </div>
</template>