vue实现手机振动

实现手机振动的基本方法

在Vue中实现手机振动功能可以通过浏览器的Vibration API。该API允许控制设备的振动硬件，适用于移动设备和部分桌面设备。

检查浏览器支持情况

在使用Vibration API前，需要检查浏览器是否支持该功能：

const isVibrationSupported = 'vibrate' in navigator;

简单振动模式

实现单次振动（持续时间为毫秒）：

navigator.vibrate(200); // 振动200毫秒

复杂振动模式

可以创建振动模式数组，交替振动和暂停：

navigator.vibrate([100, 30, 100, 30, 100]); // 振动100ms，暂停30ms，重复两次

停止振动

取消当前所有振动：

navigator.vibrate(0);

Vue组件封装示例

创建一个可复用的振动组件：

<template>
  <button @click="vibrate">振动按钮</button>
</template>

<script>
export default {
  methods: {
    vibrate() {
      if ('vibrate' in navigator) {
        navigator.vibrate([100, 50, 100]);
      } else {
        console.warn('Vibration API not supported');
      }
    }
  }
}
</script>

注意事项

振动API需要用户交互才能触发，不能自动执行。某些浏览器可能限制振动时长或模式。iOS设备对振动API的支持有限，可能需要使用其他方法实现振动效果。