vue clickoutside 点击元素以外的区域隐藏该元素

一、什么是VueUse
VueUse不是Vue.use ！！！它是一个基于 Composition API 的实用函数集合，下面是具体的一些用法
二、如何引入
import { 具体方法 } from ‘@vueuse/core’
三、下面来看看一些具体的用法
1、useMouse：监听当前鼠标坐标的一个方法，他会实时的获取鼠标的当前的位置
2、usePreferredDark：判断用户是否喜欢深色的方法，他会实时的判断用户是否喜欢深色的主题
3、useLocalStorage：数据持久化到本地存储中例子：
useLocalStorage(
‘my-storage’,
{
name: ‘author’,
},
)

4、throttleFilter：节流 throttleFilter(100)
5、debounceFilter：防抖 debounceFilter(100)
6、OnClickOutside：在点击元素外部时触发一个回调函数
**注意：**这里的 OnClickOutside 函数是一个组件，不是一个函数。需要package.json 中安装了 @vueuse/components

首先安装

"@vueuse/core"
"@vueuse/components"

import { OnClickOutside } from '@vueuse/components'

function close () {

  /* ... */

}

</script>

<template>

  <OnClickOutside @trigger="close">

    <div>

      Click Outside of Me

    </div>

  </OnClickOutside>

</template>

巴特西

vue clickoutside 点击元素以外的区域隐藏该元素

最新文章

热门文章