vue实现手机振动

vue实现手机振动的方法

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

检查浏览器支持

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

if ('vibrate' in navigator) {
  // 支持振动功能
} else {
  console.log('当前浏览器不支持振动API');
}

基本振动模式

最简单的振动方式是让设备振动指定毫秒数：

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

复杂振动模式

可以实现更复杂的振动模式，通过传递数组来定义振动和暂停的交替序列：

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

停止振动

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

navigator.vibrate(0);

Vue组件中的实现

在Vue组件中，可以将振动功能封装为方法：

methods: {
  vibrateDevice() {
    if ('vibrate' in navigator) {
      navigator.vibrate(200);
    }
  },
  complexVibration() {
    if ('vibrate' in navigator) {
      navigator.vibrate([100, 30, 100, 30, 100]);
    }
  },
  stopVibration() {
    navigator.vibrate(0);
  }
}

注意事项

振动API需要用户与页面有交互后才能触发，不能自动执行。通常需要绑定到点击等用户操作事件上：

<button @click="vibrateDevice">点击振动</button>

不同设备和浏览器对振动API的支持程度可能不同，建议在实际使用前进行充分测试。