Module vx-hooks/useClickAway

useClickAway

• useClickAway(onClickAway: (evn: MouseEvent) => void, dom?: Ref<BaseTarget | BaseTarget[]>, type?: string): UseClickAwayAPI

• 元素外点击

  example

  
   <template>
     <div id='left' ref='target'></div>
     <div id='right'></div>
   </template>
   
   setup(){
     const count = ref(0)
     const { target, addEvent, cancelEvent, reset } = useClickAway(() => { count.value += 1 })
     return { target }
   }
  
  left.trigger('click')
  count => 0
  right.trigger('click')
  count => 1
  
  // 取消 document 监听
  cancelEvent()
  right.trigger('click')
  right.trigger('click')
  count => 1
  
  // 回复 document 监听
  addEvent()
  right.trigger('click')
  count => 2
  
  // 重置回调
  const newCb = () => console.log('hidden !!!')
  reset(newCb, 'click')
  
  

  Parameters

  • onClickAway: (evn: MouseEvent) => void

    事件回调

    • • (evn: MouseEvent): void

      • Parameters

        • evn: MouseEvent

        Returns void

  • Optional dom: Ref<BaseTarget | BaseTarget[]>

    观察元素

  • type: string = 'click'

    事件类型

  Returns UseClickAwayAPI