vueuse笔记-SensorsonClickOutside 监听元素外部的点击用法示例: useElementHov

onClickOutside

监听元素外部的点击
用法示例:

<template>
   <a-button @click="openModal()">打开模态框</a-button>
  <div ref="target" 
  style="width:420px;
  height:118px;
  border:1px solid #ccc;
  position:fixed;
  top:832px;
  left:18px;" 
  v-show="modalVisible">
 </div> 
</template>
<script>
const target = ref(null)
const modalVisible = ref(false)
onClickOutside(target,(event)=>{
   modalVisible.value = false;
})
const  openModal =  function(){
  modalVisible.value = true
}
</script>

useElementHover

反应元素的hover状态
用法示例:

<template>
<p ref="el">
  <a-button type="primary">{{isHovered?'Thank you~':'hover me~'}}</a-button>
 </p >
</template>
<script>
import {useElementHover} from '@vueuse/core'
const el2 = ref();
const isHovered = useElementHover(el)
</script>

usePageLeave

响应式的展示鼠标是否离开页面
用法示例:

import {usePageLeave} from '@vueuse/core'
const isLeave = usePageLeave();// true 表示鼠标离开了页面