@y.dsh/event NPM

react自定义事件

import Event from '@y.dsh/event';

<Event
  onTap={() => {
    console.log('tap');
  }}
>
  <button>轻击</button>
</Event>

Event参数

参数	说明	默认值	类型	必选
children	子元素	undefined	React.ReactElement	√
onTap	轻击回调	undefined	Callback	×
onDoubleTap	双击回调	undefined	Callback	×
onLongPressUp	长按抬起回调	undefined	Callback	×
onLongPress	长按回调	undefined	Callback	×
onSwipeLeft	左滑回调	undefined	SwipeCallback	×
onSwipeRight	右滑回调	undefined	SwipeCallback	×
onSwipeUp	上滑回调	undefined	SwipeCallback	×
onSwipeDown	下滑回调	undefined	SwipeCallback	×
onScale	缩放回调	undefined	ScaleCallback	×
tapPreventDefault	针对tap类型事件完全阻止默认行为	false	boolean	×
longPressPreventDefault	针对longPress类型事件完全阻止默认行为	false	boolean	×
swipePreventDefault	针对swipe类型事件阻止默认行为只在瞬间达到触发条件，或者该方向无滚动条时工作	false	boolean	×
swipeEntirelyPreventDefault	针对swipe类型事件完全阻止默认行为	false	boolean	×
scalePreventDefault	针对scale类型事件完全阻止默认行为	false	boolean	×
tapOptions	onTap触发条件	TapOptions	TapOptions	×
doubleTapOptions	onDoubleTap触发条件	DoubleTapOptions	DoubleTapOptions	×
longPressUpOptions	onLongPressUp触发条件	LongPressUpOptions	LongPressUpOptions	×
longPressOptions	onLongPress触发条件	LongPressOptions	LongPressOptions	×
swipeMeanwhileTrigger	swipe事件在触发了一个之后，在没抬起之前能否触发第二个事件，为false时distance可以得到负值	false	boolean	×
swipeLeftOptions	onSwipeLeft触发条件	SwipeOptions	SwipeOptions	×
swipeRightOptions	onSwipeRight触发条件	SwipeOptions	SwipeOptions	×
swipeUpOptions	onSwipeUp触发条件	SwipeOptions	SwipeOptions	×
swipeDownOptions	onSwipeDown触发条件	SwipeOptions	SwipeOptions	×

阻止默认事件说明

/**
 * tapPreventDefault
 * [onTap, onDoubleTap]: 移动端按下时阻止
 * [onLongPressUp, onLongPress]: 无效
 * [onSwipeLeft, onSwipeRight, onSwipeUp, onSwipeDown]: 无效
 * [onScale]: 无效
 * 
 * longPressPreventDefault
 * [onTap, onDoubleTap]: 无效
 * [onLongPressUp, onLongPress]: 移动端按下时阻止
 * [onSwipeLeft, onSwipeRight, onSwipeUp, onSwipeDown]: 无效
 * [onScale]: 无效
 * 
 * swipePreventDefault
 * [onTap, onDoubleTap]: 无效
 * [onLongPressUp, onLongPress]: 无效
 * [onSwipeLeft, onSwipeRight, onSwipeUp, onSwipeDown]: 移动端瞬间达到触发条件或者改方向无滚动条时阻止
 * [onScale]: 无效
 * 
 * swipeEntirelyPreventDefault
 * [onTap, onDoubleTap]: 无效
 * [onLongPressUp, onLongPress]: 无效
 * [onSwipeLeft, onSwipeRight, onSwipeUp, onSwipeDown]: 移动端按下时阻止
 * [onScale]: 无效
 * 
 * scalePreventDefault
 * [onTap, onDoubleTap]: 无效
 * [onLongPressUp, onLongPress]: 无效
 * [onSwipeLeft, onSwipeRight, onSwipeUp, onSwipeDown]: 无效
 * [onScale]: 移动端按下时阻止
 */

Callback

type Callback = (event: MouseEvent | TouchEvent) => void;

SwipeCallback

type SwipeCallback = (event: MouseEvent | TouchEvent, distance: number) => void; // distance 为滑动距离 移动距离减去minMove

ScaleCallback

interface ScaleCallbackParams { // 缩放事件回调参数
  type: 'start' | 'move' | 'end' // 事件类型
  startTouches: Touch[] // 起始位置手指对象
  moveTouches: Touch[] // 移动时的手指对象
  scale: number // 缩放比
}
type ScaleCallback = (params: ScaleCallbackParams) => void; // 缩放事件回调

TapOptions | 参数 | 说明 | 默认值 | 类型 | 必选 | |---------|-------------------------|--------|--------|:----:| | minTime | 触发起始时间包含此值 | 0 | number | × | | maxTime | 触发结束时间包含此值 | 300 | number | × | | minMove | 触发最小移动距离包含此值 | 0 | number | × | | maxMove | 触发最大移动距离包含此值 | 2 | number | × |

DoubleTapOptions | 参数 | 说明 | 默认值 | 类型 | 必选 | |----------|---------------------------------|--------|--------|:----:| | minTime | 单次轻击触发起始时间包含此值 | 0 | number | × | | maxTime | 单次轻击触发结束时间包含此值 | 300 | number | × | | minMove | 单次轻击触发最小移动距离包含此值 | 0 | number | × | | maxMove | 单次轻击触发最大移动距离包含此值 | 2 | number | × | | timeSpan | 两次轻击最大时间跨度包含此值 | 400 | number | × |

LongPressUpOptions | 参数 | 说明 | 默认值 | 类型 | 必选 | |---------|-------------------------|----------|--------|:----:| | minTime | 触发起始时间包含此值 | 500 | number | × | | maxTime | 触发结束时间包含此值 | Infinity | number | × | | minMove | 触发最小移动距离包含此值 | 0 | number | × | | maxMove | 触发最大移动距离包含此值 | 4 | number | × |

LongPressOptions | 参数 | 说明 | 默认值 | 类型 | 必选 | |---------|-------------------------|--------|--------|:----:| | minTime | 触发起始时间包含此值 | 500 | number | × | | minMove | 触发最小移动距离包含此值 | 0 | number | × | | maxMove | 触发最大移动距离包含此值 | 4 | number | × |

SwipeOptions | 参数 | 说明 | 默认值 | 类型 | 必选 | |---------|-------------------------|--------|--------|:----:| | minMove | 触发最小移动距离包含此值 | 10 | number | × |

react event 自定义事件

@y.dsh/hooks @y.dsh/utils

@y.dsh/scroll

1.0.1

3 years ago

1.0.0

3 years ago