监听除某元素之外点击事件

Front小思

共 571字,需浏览 2分钟

 · 2021-11-13

需求:有时候如果我们需要监听个元素位的点击事件,例如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 }  }

浏览 19
点赞
评论
收藏
分享

手机扫一扫分享

举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

举报