当前位置：首页 > VUE

vue实现手机震动

2026-01-18 02:14:43VUE

Vue 中实现手机震动的方法

在 Vue 项目中可以通过调用浏览器的 Vibration API 实现手机震动功能。以下是具体实现方式：

检测浏览器支持性

在调用震动功能前需检查浏览器是否支持该 API：

vue实现手机震动

const isVibrationSupported = 'vibrate' in navigator;

基本震动实现

调用 navigator.vibrate() 方法触发震动，参数为毫秒数或震动模式数组：

vue实现手机震动

// 单次震动 200ms
navigator.vibrate(200);

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

Vue 组件封装示例

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

<script>
export default {
  methods: {
    vibrate() {
      if (!navigator.vibrate) {
        alert('您的设备不支持震动功能');
        return;
      }

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

停止震动

可以通过传递 0 或空数组停止当前震动：

navigator.vibrate(0);
// 或
navigator.vibrate([]);

注意事项

该 API 需要用户先与页面交互（如点击按钮）后才能触发
iOS 设备普遍不支持此 API
长时间震动可能被浏览器限制
建议将震动功能包装在用户交互事件处理器中

兼容性处理

对于不支持原生震动的设备，可以尝试以下 fallback 方案：

function safeVibrate(pattern) {
  if (navigator.vibrate) {
    navigator.vibrate(pattern);
  } else {
    console.warn('Vibration not supported');
    // 可以在此处添加替代反馈，如声音提示
  }
}

响应式封装示例

<template>
  <button @click="triggerVibration">震动反馈</button>
</template>

<script>
export default {
  data() {
    return {
      isSupported: false
    }
  },
  mounted() {
    this.isSupported = 'vibrate' in navigator;
  },
  methods: {
    triggerVibration() {
      if (this.isSupported) {
        navigator.vibrate([30, 50, 30]);
      }
    }
  }
}
</script>