useVibration

控制设备震动，支持单次震动和复杂震动模式。仅在移动设备上可用

前置依赖

依赖参数

参数名	类型	说明
deps.vue.ref	<T>(value: T) => Ref<T>	Vue ref 函数
deps.navigator	NavigatorVibration	Navigator API
deps.setTimeout	typeof setTimeout	定时器函数
deps.isMobile	boolean	是否为移动设备（使用 isMobile() 函数检测）

环境要求

浏览器 API: Vibration API

需要在移动设备上测试，桌面浏览器可能不支持震动功能。

函数签名

function useVibration(
  deps: UseVibrationDeps
): UseVibrationReturn

interface UseVibrationDeps {
  vue: VueCompositionAPI
  navigator: NavigatorVibration
  setTimeout: typeof setTimeout
  isMobile: boolean
}

interface UseVibrationReturn {
  isSupported: Ref<boolean>
  isVibrating: Ref<boolean>
  vibrate: (pattern: number | number[]) => boolean
  stop: () => boolean
}

参数

参数名	类型	必填	说明
deps	UseVibrationDeps	是	依赖注入对象

返回值

属性	类型	说明
isSupported	Ref<boolean>	是否支持震动 API
isVibrating	Ref<boolean>	是否正在震动
vibrate	(pattern: number | number[]) => boolean	开始震动
stop	() => boolean	停止震动

震动模式

单次震动

// 震动 200 毫秒
vibration.vibrate(200)

震动模式

模式数组：[震动, 暂停, 震动, 暂停, ...]

// 震动100ms，暂停50ms，震动200ms
vibration.vibrate([100, 50, 200])

// 常见模式
vibration.vibrate([50, 50, 50])              // 成功提示
vibration.vibrate([100, 50, 100, 50, 100])   // 警告提示
vibration.vibrate([200, 100, 200])           // 错误提示

工作原理

1. 检查是否为移动设备（通过 isMobile 参数）
2. 检查浏览器是否支持震动 API（navigator.vibrate）
3. 只有同时满足移动设备 且 支持 API 时才认为支持震动
4. 调用 vibrate() 时执行震动，并更新 isVibrating 状态
5. 计算震动总时长，自动在震动结束后更新状态
6. stop() 通过调用 vibrate(0) 来停止震动

注意：震动功能仅在移动设备（手机/平板）上可用，桌面浏览器通常不支持此功能。

震动功能常用于：

• 按钮点击反馈
• 操作成功/失败提示
• 消息通知
• 游戏触觉反馈