一、什么是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 点击元素以外的区域隐藏该元素的更多相关文章

  1. jquery 点击元素以外任意地方隐藏该元素的方法

    文章来源:百度知道 我的思路是给body绑定一个click事件,然后判断当前鼠标点击的区域是当前元素还是元素以外区域,如果点击对象不是当前元素,则隐藏该元素. 假设对象的id为divBtn,则代码如下 ...

  2. 点击任何位置隐藏所需隐藏的元素 (无BUG/jQuery版)

    1>第一种分两步 1) :对document的click事件绑定事件处理程序,使其隐藏该div 2) :对div的click事件绑定事件处理程序,阻止事件冒泡,防止其冒泡到document,而调 ...

  3. js点击页面其他地方如何隐藏div元素菜单

    web页面常用的一个需求,写下拉菜单是我们往往不是用select_option,而是自定义一个元素列出选项来满足需求,当我们点击按钮出现菜单, 点击按钮或菜单以外页面空白地方隐藏该菜单,这里提供一种简 ...

  4. 我优化了一下:jquery点击元素以外任意地方隐藏该元素的方法

    我优化了一下 $(document).bind('click', function (event) { var evt = event.srcElement ? event.srcElement : ...

  5. 如何隐藏DOM元素

    在CSS中,要隐藏DOM元素常见的方法有: 设置元素的opacity值为0 设置元素的visibility值为hidden 设置元素的display值为none 设置元素的position值为abso ...

  6. jq自定义下拉菜单,在点击非当前下拉菜单区域时,关闭下拉菜单(点击事件的对象不是目标元素本身)

    jq自定义下拉菜单,在点击非当前下拉菜单区域时,关闭下拉菜单(点击事件的对象不是目标元素本身) //点击非当前下拉菜单区域时,关闭下拉菜单 $(document).mousedown(function ...

  7. vue 的点击事件怎么获取当前点击的元素

    手机赚钱怎么赚,给大家推荐一个手机赚钱APP汇总平台:手指乐(http://www.szhile.com/),辛苦搬砖之余用闲余时间动动手指,就可以日赚数百元   首先 vue的点击事件 是用 @cl ...

  8. jquery点击非div区域隐藏div

    点击非div区域隐藏div,如图,点击圆的头像(.person-msg)弹出白色底框(.person-centre).点击圆头像以外的区域隐藏白色底框

  9. 实现点击页面其他地方,隐藏div(原生和VUE)

    1原生方法 // html <div id="box" style="width:110px;height:110px;background-color:red&q ...

  10. JQ 点击指定文本框显示div。点击其他区域隐藏DIV

    <input id="username" type="text" style="width:90%;margin-top: 40px;" ...

随机推荐

  1. Educational Codeforces Round 112 E、Boring Segments

    原题网址 https://codeforces.com/contest/1555/problem/E 题目大意 有n个区间.每个区间是[1,m]的子区间.从a可以一步走到b的充要条件是存在区间同时覆盖 ...

  2. 微信开发获取code的时候总是提示 10003 redirect_uri域名与后台配置不一致

    填写的地址不能加 http://

  3. js网页禁止右键下载代码

    <script type="text/javascript"> //禁用右键 document.onkeydown = function() { var e = win ...

  4. 一些JVM指令

    1.jps:查看本机java进程信息. 2 .jstack:打印线程的栈信息,制作线程dump文件. 3.jmap:打印内存映射,制作堆dump文件 4.jstat:性能监控工具 5.jhat:内存分 ...

  5. 【MySQL】MySQL时区问题、数据库时间相差8小时问题解决

    解决:修改MySQL系统时区,改为东8区. 在命令行界面或者可视化工具下(如:Navicat)依次运行以下命令. 1.查询当前系统时间 select now(); 2.检查MySQL系统时区 show ...

  6. .net core解决时间格式转换问题或日期取当前时间

    一.时间格式转换 1.新建一个格式化类DatetimeJsonConverter,继承自JsonConverter,然后重写里面的方法 public class DatetimeJsonConvert ...

  7. Linux中启动Docker容器报错:Error response from daemon: driver failed programming external connectivity

    在启动Docker的容器时,会出现报错:Error response from daemon: driver failed programming external connectivity on e ...

  8. gitlab 已有代码仓库推送到另外一个gitlab仓库

    创建一个新仓库 git clone ssh://git@gitlab.***************.git cd plt-calcium-report-web touch README.md git ...

  9. Xrdp服务安装配置实现Linux远程桌面访问以及问题处理

    0x00 基础介绍 0x01 安装桌面环境 Ubuntu 系列 0x02 Xrdp 安装使用 How to Install xrdp on Ubuntu ? How to Install xrdp t ...

  10. OL3-Cesium 二三维鼠标事件统一处理

    like the github issue: https://github.com/openlayers/ol3-cesium/issues/344#issuecomment-214098148 th ...