onClickOutside(点击一个Dom其他地方的逻辑操作)
onClickOutside是Vueuse里面的一个函数,所以使用它之前要先下载Vueusenpm i @vueuse/core然后引入onClickOutside函数,此函数可以监听一个函数元素,实现点击这个元素的其他地方触发的函数,比如一个组件,点击组件的其他地方关闭该组件。具体实现的逻辑如下:import { onClickOutside } from '@vueuse/core'setup
·
onClickOutside是Vueuse里面的一个函数,
所以使用它之前要先下载Vueuse
npm i @vueuse/core
然后引入onClickOutside函数,此函数可以监听一个函数元素,实现点击这个元素的其他地方触发的函数,比如一个组件,点击组件的其他地方关闭该组件。
具体实现的逻辑如下:
import { onClickOutside } from '@vueuse/core'
setup(){
// 实现点击组件外部元素进行关闭操作
const target = ref(null)
onClickOutside(target, () => {
// 参数1:监听那个元素
// 参数2:点击了该元素外的其他地方触发的函数
close()
})
const close = () => {
visible.value = false
}
}
更多推荐
已为社区贡献4条内容
所有评论(0)