Module vx-hooks/useHover

useHover

• useHover(options?: UseHoverOptions): UseHoverAPI

• 鼠标悬停

  example

  
  <div id='area' ref='target'> {{ hoverStatus }} </div>
  <button @click='addEvent'> {{ addEvent }} </button>
  <button @click='cancelEvent'> {{ cancelEvent }} </button>
  
  setup() {
     const count = ref(0)
     const onEnter = () => {
       count.value += 1
     }
     const onLeave = () => {
       count.value -= 1
     }
     const { target, hoverStatus, addEvent, cancelEvent} = useHover({ onEnter, onLeave })
  
     return {
       count,
       target,
       hoverStatus,
       addEvent,
       cancelEvent
     }
   }
  
   target.trigger('mouseenter') // count: 1 hoverStatus: true
   target.trigger('mouseleave') // count: 0 hoverStatus: false
  
   cancelEvent()
   target.trigger('mouseenter') // count: 0 hoverStatus: false
  
   addEvent()
   target.trigger('mouseenter') // count: 1 hoverStatus: true
  
  

  Parameters

  • options: UseHoverOptions = ...

    配置项目

  Returns UseHoverAPI