监听除某元素之外点击事件
需求:有时候如果我们需要监听某个元素职位的点击事件,例如input框获取焦点软盘弹起,托起 position: absolute; bottom: 0;在底部的dmoe元素,现在我点击软盘弹起状态的情况点击该dmoe时软盘不会失去焦点!
npm:
npm i @vueuse/core
From v6.0, VueUse requires vue >= v3.2 or @vue/composition-api >= v1.1
CDN:
<script src="https://unpkg.com/@vueuse/shared">script>
<script src="https://unpkg.com/@vueuse/core">script>
import { onClickOutside } from '@vueuse/core'
把target加载外层容器上:
class="content" ref="target">setup() {
// 鼠标在目标之外点击,就会执行回调
onClickOutside(监听的目标, (e) => {
// 鼠标在目标之外点击,要做什么?
})
}
setup () {
// ...
// 点击其他位置隐藏
const target = ref(null)
onClickOutside(target, () => {
closeDialog()
})
return { visible, toggleDialog, target }
}
评论