Vue useVibrate 手机振动功能

现在的手机基本都支持振动功能,通过useVibrate我们可以知道当前手机是否支持振动和调用vibrate方法让手机振动起来。

代码示例

import { useVibrate } from '@vueuse/core'

// 使设备振动300毫秒
// 然后暂停100毫秒,然后再次震动设备300毫秒
const { vibrate, stop, isSupported } = useVibrate({ pattern: [300, 100, 300] })

//开始振动
vibrate()

// 停止振动
stop()

类型定义

export interface UseVibrateOptions extends ConfigurableNavigator {
  /**
   *
   * Vibration Pattern
   *
   * An array of values describes alternating periods in which the
   * device is vibrating and not vibrating. Each value in the array
   * is converted to an integer, then interpreted alternately as
   * the number of milliseconds the device should vibrate and the
   * number of milliseconds it should not be vibrating
   *
   * @default []
   *
   */
  pattern?: MaybeRefOrGetter<number[] | number>
  /**
   * Interval to run a persistent vibration, in ms
   *
   * Pass `0` to disable
   *
   * @default 0
   *
   */
  interval?: number
}
/**
 * Reactive vibrate
 *
 * @see https://vueuse.org/useVibrate
 * @see https://developer.mozilla.org/en-US/docs/Web/API/Vibration_API
 * @param options
 */
export declare function useVibrate(options?: UseVibrateOptions): {
  isSupported: ComputedRef<boolean>
  pattern: MaybeRefOrGetter<number | number[]>
  intervalControls: Pausable | undefined
  vibrate: (pattern?: number | number[]) => void
  stop: () => void
}
export type UseVibrateReturn = ReturnType<typeof useVibrate>