vue实现按钮按压

实现按钮按压效果的 Vue 方法

使用 CSS 类绑定

通过 Vue 的 v-bind:class 或简写 :class 动态切换样式类，实现按压效果。

<template>
  <button 
    @mousedown="isPressed = true"
    @mouseup="isPressed = false"
    @mouseleave="isPressed = false"
    :class="{ 'pressed': isPressed }"
  >
    按压按钮
  </button>
</template>

<script>
export default {
  data() {
    return {
      isPressed: false
    }
  }
}
</script>

<style>
button {
  padding: 10px 20px;
  transition: transform 0.1s;
}
button.pressed {
  transform: scale(0.95);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}
</style>

使用行内样式绑定

通过 :style 直接修改元素的样式属性，适合简单交互。

<template>
  <button
    @mousedown="pressButton"
    @mouseup="releaseButton"
    :style="buttonStyle"
  >
    动态样式按钮
  </button>
</template>

<script>
export default {
  data() {
    return {
      isPressed: false
    }
  },
  methods: {
    pressButton() {
      this.isPressed = true;
    },
    releaseButton() {
      this.isPressed = false;
    }
  },
  computed: {
    buttonStyle() {
      return {
        transform: this.isPressed ? 'scale(0.95)' : 'scale(1)',
        transition: 'transform 0.1s'
      };
    }
  }
}
</script>

结合动画库

使用第三方动画库如 Animate.css 或 GSAP 实现更复杂的按压效果。

<template>
  <button
    @mousedown="animatePress"
    @mouseup="animateRelease"
    ref="btn"
  >
    动画按钮
  </button>
</template>

<script>
import gsap from 'gsap';
export default {
  methods: {
    animatePress() {
      gsap.to(this.$refs.btn, { 
        scale: 0.95, 
        duration: 0.1 
      });
    },
    animateRelease() {
      gsap.to(this.$refs.btn, { 
        scale: 1, 
        duration: 0.2 
      });
    }
  }
}
</script>

移动端适配

通过 touchstart 和 touchend 事件确保移动端兼容性。

<template>
  <button
    @mousedown="startPress"
    @mouseup="endPress"
    @touchstart="startPress"
    @touchend="endPress"
    :class="{ 'active': isActive }"
  >
    跨端按钮
  </button>
</template>

<script>
export default {
  data() {
    return {
      isActive: false
    }
  },
  methods: {
    startPress() {
      this.isActive = true;
    },
    endPress() {
      this.isActive = false;
    }
  }
}
</script>

关键注意事项

• 事件清除：需处理 mouseleave 防止鼠标移出时状态未复位。
• 性能优化：避免频繁的 DOM 操作，优先使用 CSS 变换。
• 无障碍访问：为按钮添加 aria-pressed 属性辅助屏幕阅读器识别状态。

<button 
  :aria-pressed="isPressed.toString()"
>
  无障碍按钮
</button>