vue实现手机震动

使用Vibration API实现手机震动

Vue中可以通过调用浏览器的Vibration API实现手机震动功能。该API允许控制设备的振动硬件，适合在移动端浏览器中使用。

检查浏览器支持情况

在调用振动API前，应该先检查浏览器是否支持该功能：

const isVibrationSupported = 'vibrate' in navigator;

基本震动实现

简单的单次震动可以通过以下代码实现：

// 震动100毫秒
navigator.vibrate(100);

// 在Vue方法中调用
methods: {
  vibrate() {
    if ('vibrate' in navigator) {
      navigator.vibrate(100);
    }
  }
}

震动模式

可以设置更复杂的震动模式，传入数组指定震动和间隔时间：

// 震动200ms，暂停100ms，再震动300ms
navigator.vibrate([200, 100, 300]);

停止震动

要取消当前震动，可以调用：

navigator.vibrate(0);

Vue组件封装示例

可以封装成可复用的Vue组件：

<template>
  <button @click="vibrate">震动</button>
</template>

<script>
export default {
  methods: {
    vibrate() {
      if (!('vibrate' in navigator)) {
        console.warn('Vibration API not supported');
        return;
      }

      // 震动模式：短-长-短
      navigator.vibrate([100, 50, 200]);
    }
  }
}
</script>

注意事项

振动API在iOS设备上支持有限，某些版本可能不支持。建议始终检查API可用性。

长时间或频繁震动可能影响用户体验，应谨慎使用。某些浏览器可能限制振动时长或需要用户手势触发。