对于想要简单触发波纹动画效果的按钮等dom元素，直接在其上绑定@pointerdown="ripplet"即可。

对于类似安卓系统设置中的菜单项，pointerdown会触发背景色动画的同时，如果pointerdown后续紧跟滑动动作的话，背景色动画会快速结束。类似的，对于pointerdown触发的波纹动画效果，如果用户的动作是滑动的话，可以按下面的办法快速结束波纹动画。

export const applyRippleWithMoveCancel = (e) => {
  let startX = e.clientX
  let startY = e.clientY
  let moved = false
  const target = e.currentTarget

  const rippleEl = ripplet(e, { className: 'custom-ripple' })

  const handleMove = (moveEvent) => {
    const dx = moveEvent.clientX - startX
    const dy = moveEvent.clientY - startY

    if (!moved && Math.sqrt(dx * dx + dy * dy) > 1) {
      moved = true
      rippleEl.classList.add('ripple-hidden')
      cleanup()
    }
  }
  const cleanup = () => {
    target.removeEventListener('pointermove', handleMove)
  }
  target.addEventListener('pointermove', handleMove)
}

需要添加如下全局样式：

.custom-ripple{

}
.ripple-hidden {
  opacity: 0 !important;
  transition:
    opacity 0.2s linear,
}

其中移动多少距离就快速隐藏波纹动画、隐藏的时间、样式都可以自行定义。