vue实现点击某个dom元素之外的方法

在项目开发中搜索按钮点击出现搜索框内容，这个时候点击搜索框以外的内容，搜索框隐藏掉，如下所示：
1、源码

2、实现点击其他区域搜索框内容隐藏，如下：

document.addEventListener('click', (e) => {if (this.$refs.showPanel) {let isSelf = this.$refs.showPanel.contains(e.target)if (!isSelf) {this.searchbox = false}}})

实现原理：
①、首先用ref来定义一个点击区域的范围
②、监听点击事件，点击的时候如果包含ref元素则返回true，否则返回false（即不包含的时候隐藏属性）

vue实现点击某个dom元素之外的方法相关推荐

使用Vue里面的ref 控制DOM元素的样式marginleft，marginLeft的只是变化了，但是视图没有变化，求解答
使用Vue里面的ref 控制DOM元素的样式marginleft,marginLeft的只是变化了,但是视图没有变化,求解答 <template><div><div cl ...
html点击除某个元素之外的元素的事件添加技巧
可以利用css中的z-index属性来完成,先在页面添加一个div,设置这个div的属性为:宽高都为100%,透明属性opacity为0,绝对定位为top:0,left:0,暂且称这个div为a,添加 ...
JS-DOM ～ 03. 子节点的操作、style.样式和属性、dom元素的创建方法及操作、14个例题、主要是利用js直接控制html属性...
带有Element和不带的区别 a) 带Element的获取的是元素节点 b) 不带可能获取文本节点和属性节点获取所以子节点 a) . childNodes b) . children ...
Vue + Element UI——监听DOM元素高度和宽度解决方案整理（八种方法）
问题描述监听DOM元素大小的变化,在前端开发中,算是一个比较常见的需求,比如我们要制作可伸缩的图表的时候,可能需要根据DOM大小的变化,进行动态的更新图表. 解决方案方法一: 监听window变化 ...
vue中获取并操作dom元素
获取dom元素可以使用 elementList = document.querySelectorAll(selectors);//获取多个dom元素如ul中的li element = documen ...
Vue.js中$refs{}获取DOM元素
如果我们想获取DOM元素,一般使用js中的document.querySelector来获取这个dom节点,然后在获取元素的值,现在Vue提供给我们一种更便捷的方式来获取DOM元素-----$refs ...
vue如何获取并操作DOM元素
原文地址方法一: 直接给相应的元素加id,然后再document.getElementById("id");获取,然后设置相应属性或样式方法二: 使用ref,给相应的元素加re ...
Vue.js实例学习：获取DOM元素
一.获取DOM元素在Vue中获取DOM元素,我们可以用ref. 用法(和React一样): (1)在组件的DOM部分,任意标签中写上:ref="xxx" (2)通过组件对象 t ...
【vue】vue 如何获取并操作DOM元素
方法一: 直接给的元素加id,使用document.getElementById("id")获取,然后操作 dom 元素 mounted(){this.element = docu ...

vue实现点击某个dom元素之外的方法

vue实现点击某个dom元素之外的方法相关推荐

最新文章

热门文章