当前位置：首页 > VUE

vue实现手机振动

2026-03-09 10:26:16VUE

使用Vue实现手机振动功能

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

检查浏览器支持情况

在调用振动API前，需要先检查浏览器是否支持该功能。可以通过以下代码检测：

const isVibrationSupported = 'vibrate' in navigator;

基本振动模式

最简单的振动方式是让设备振动固定毫秒数。以下是一个Vue方法示例：

vue实现手机振动

methods: {
  vibrateDevice() {
    if ('vibrate' in navigator) {
      navigator.vibrate(200); // 振动200毫秒
    }
  }
}

复杂振动模式

Vibration API支持更复杂的振动模式，通过传入数组指定振动和暂停的交替时间：

methods: {
  complexVibration() {
    if ('vibrate' in navigator) {
      navigator.vibrate([100, 30, 100, 30, 100]); // 振动100ms，暂停30ms，重复三次
    }
  }
}

停止振动

要提前停止正在进行的振动，可以调用不带参数或传入0的vibrate方法：

vue实现手机振动

methods: {
  stopVibration() {
    if ('vibrate' in navigator) {
      navigator.vibrate(0); // 停止振动
    }
  }
}

Vue组件示例

以下是一个完整的Vue组件示例，包含振动控制和停止功能：

<template>
  <div>
    <button @click="startVibration">开始振动</button>
    <button @click="stopVibration">停止振动</button>
  </div>
</template>

<script>
export default {
  methods: {
    startVibration() {
      if ('vibrate' in navigator) {
        navigator.vibrate([100, 30, 100, 30, 100]);
      } else {
        alert('您的设备不支持振动功能');
      }
    },
    stopVibration() {
      if ('vibrate' in navigator) {
        navigator.vibrate(0);
      }
    }
  }
}
</script>