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 点击元素以外的区域隐藏该元素的更多相关文章
- jquery 点击元素以外任意地方隐藏该元素的方法
文章来源:百度知道 我的思路是给body绑定一个click事件,然后判断当前鼠标点击的区域是当前元素还是元素以外区域,如果点击对象不是当前元素,则隐藏该元素. 假设对象的id为divBtn,则代码如下 ...
- 点击任何位置隐藏所需隐藏的元素 (无BUG/jQuery版)
1>第一种分两步 1) :对document的click事件绑定事件处理程序,使其隐藏该div 2) :对div的click事件绑定事件处理程序,阻止事件冒泡,防止其冒泡到document,而调 ...
- js点击页面其他地方如何隐藏div元素菜单
web页面常用的一个需求,写下拉菜单是我们往往不是用select_option,而是自定义一个元素列出选项来满足需求,当我们点击按钮出现菜单, 点击按钮或菜单以外页面空白地方隐藏该菜单,这里提供一种简 ...
- 我优化了一下:jquery点击元素以外任意地方隐藏该元素的方法
我优化了一下 $(document).bind('click', function (event) { var evt = event.srcElement ? event.srcElement : ...
- 如何隐藏DOM元素
在CSS中,要隐藏DOM元素常见的方法有: 设置元素的opacity值为0 设置元素的visibility值为hidden 设置元素的display值为none 设置元素的position值为abso ...
- jq自定义下拉菜单,在点击非当前下拉菜单区域时,关闭下拉菜单(点击事件的对象不是目标元素本身)
jq自定义下拉菜单,在点击非当前下拉菜单区域时,关闭下拉菜单(点击事件的对象不是目标元素本身) //点击非当前下拉菜单区域时,关闭下拉菜单 $(document).mousedown(function ...
- vue 的点击事件怎么获取当前点击的元素
手机赚钱怎么赚,给大家推荐一个手机赚钱APP汇总平台:手指乐(http://www.szhile.com/),辛苦搬砖之余用闲余时间动动手指,就可以日赚数百元 首先 vue的点击事件 是用 @cl ...
- jquery点击非div区域隐藏div
点击非div区域隐藏div,如图,点击圆的头像(.person-msg)弹出白色底框(.person-centre).点击圆头像以外的区域隐藏白色底框
- 实现点击页面其他地方,隐藏div(原生和VUE)
1原生方法 // html <div id="box" style="width:110px;height:110px;background-color:red&q ...
- JQ 点击指定文本框显示div。点击其他区域隐藏DIV
<input id="username" type="text" style="width:90%;margin-top: 40px;" ...
随机推荐
- k8s ingress 报错整理
问题: Error from server (InternalError): error when creating "ingress-rules-demo1.yaml": Int ...
- java运算符相关学习
java运算符 面试题1: 计算2*8如何操作效率更高? 剖析: 2 * 8 => 实际上是2 * 2 * 2 * 2 2<<3 System.out.println(2<&l ...
- List循环问题
list循环时的问题,报错,称找不到该字段属性,原因如下: 1.字段名与toString里不匹配: 2.首字母大写了: 原回答:https://blog.csdn.net/qq_42671193/ar ...
- Docker 安全加固
一.docker安全加固 1.利用LXCFS增强docker容器隔离性和资源可见性 (proc容器与宿主机之间是共享的 没有进行隔离) 此rpm包在真机桌面q目录中 需先传到虚拟机/root/下 在 ...
- deepinlinux安装golang
Download 从 Google 官方获取安装包,不用FQ直接访问 http://golang.google.cn,选择 Linux 的安装包如 go1.14.linux-amd64.tar.gz ...
- 【SSO单点系列】(3):CAS4.0 之自定义返回登出页面
一.登出实现返回自定义页面 服务端修改 cas-servlet.xml <bean id="logoutAction" class="org.jasig.cas.w ...
- 教你如何自己搭环境部署华为FusionCompute虚拟化系统
https://www.bilibili.com/video/BV1iy4y177f4?p=10 实用的干货快先码起来,说不定以后会用到哟
- .NET Core读写InfluxDB时序数据库的方法教程
前言 在我们很多应用中会遇到有一种基于一系列时间的数据需要处理,通过时间的顺序可以将这些数据点连成线,再通过数据统计后可以做成多纬度的报表,也可通过机器学习来实现数据的预测告警.而时序数据库就是用于存 ...
- 小白之Python-基础中的基础04
继续.. ------------------------华丽的分界线----------------------------- Python-基础中的基础04 --之方法 格式:对象.方法() 1. ...
- Apache SSI远程命令执行漏洞复现
漏洞原理:当目标服务器开启了SSI与CGI支持,就可以上传shtml文件,并利用语法执行任意命令,例如<!- - #exec cmd="ls"- ->,cmd后面跟要执 ...