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

最新推荐文章于 2024-06-25 22:34:03 发布
最新推荐文章于 2024-06-25 22:34:03 发布
阅读量2.9k 收藏 8
点赞数 2
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29236119/article/details/115066701
版权

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

2、实现点击其他区域搜索框内容隐藏，如下：
在这里插入图片描述

document.addEventListener('click', (e) => {
   
   if (this.$refs
最低0.47元/天 解锁文章
summer88221
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
 vue中实现点击当前元素之外的元素之执行此方法（clickoutside）
mm
06-03 2586
引入： importClickoutsidefrom"element-ui/src/utils/clickoutside"; 声明指令： export default { directives: { Clickoutside }, data() {} } 使用： <div v-clickoutside="handleClose"> </div> methods: { handleClose() { console....
在Vue中点击某个元素以外的元素时让这个元素隐藏或关闭
zk86547462的博客
08-25 8736
在实际开发中，可能会有点击某个元素以外的元素时让这个元素隐藏或关闭的需求。在Vue中实现则更加简单。 思路 为全局document添加click事件，判断是否为指定节点及其子节点，如果不是则隐藏该指定节点。 例如该组件 <template> <div> <span v-show="isShow">没点击我我就消失了哦</span> <button @click="isShow = true">显示</b
解决点击某元素以外的地方触发事件以及模拟点击事件
最新发布
m0_73884922的博客
06-25 178
使用JavaScript中的 dispatchEvent() 方法，模拟用户交互事件
Vue 自定义指令实现点击DOM元素以外触发事件
哈哈hyc的博客
09-16 1787
1.directive.js import Vue from "vue"; // 提交验证 Vue.directive("clickOutside", { // 初始化指令 bind(el, binding, vnode) { function clickHandler(e) { // 这里判断点击的元素是否是本身，是本身，则返回 if (el.contains(e.target)) { return false; }
记录 vue自定义指令 实现展示搜索记录，点击其他区域隐藏
weixin_30362233的博客
06-04 346
// const clickoutside = { // bind(el, binding,) { // function documentHandler(e) { // // 这里判断点击的元素是否是本身，是本身，则返回 // if (el.contains(e.target)) { // return false; // } /...
VUE_vue2/3点击区域外触发方法，点击除某个元素触发监听
小歪博客
03-12 865
VUE_vue2/3点击区域外触发方法，点击除某个元素触发监听
vue3-clickout:指令，允许您在元素的活动区域之外单击时调用函数
05-19
vue3-clickout 该指令允许您在元素的活动区域之外单击时调用函数。 元素的活动区域是元素本身以及嵌套在其中的任何后代。要求Vue 3.x安装 npm i vue3-clickout全球注册在全球范围内注册后，该指令将在整个项目中可用...
vue 点击其他区域关闭自定义div操作
10-15
在Vue.js应用中，有时我们需要实现一种功能，即当用户点击页面上的某个自定义div后，该div显示，而当用户点击除这个div之外的任何其他区域时，该div消失。这种需求通常出现在下拉菜单、弹出框或提示信息等组件中。...
浅谈VUE中演示v-for为什么要加key
10-15
在上述示例中，当`unshift`方法用于在列表开头添加新项时，Vue能够根据`key`判断新旧元素的区别，从而正确地更新DOM，保持原有的选中状态。 Vue的虚拟DOM Diff算法是其高效更新的关键。Diff算法的核心在于对比旧的...
基于vue做的一个快餐店收银系统（适合刚入门的人看）
07-22
例如，v-for可以用于循环遍历商品列表，v-if则可以控制某个元素根据条件显示或隐藏。在收银系统中，这些指令会大大简化代码并提高性能。 虚拟DOM是Vue为了优化性能引入的一个概念，它在内存中构建了一个DOM的抽象层...
Vue-Principle-Analysis:Vue原始码分析
03-23
同时，Vue 3.x的 teleport 组件提供了在父组件之外渲染元素的能力，增强了布局控制。 虚拟DOM是现代前端框架提高性能的关键。Vue使用虚拟DOM来对比和更新实际DOM，减少了不必要的DOM操作。Vue 2.x中的`render`函数...
点击除目标元素以外区域触发事件
qq_37304058的博客
02-06 408
mounted() {constthatthisdocument'click', (e=>ifthatvisible) {ifetargetclassNameindexOf===1&&etargetclassNameindexOf'el-input'===1) {thatvisiblefalse})},
vue构造函数，判断当前点击事件是否是某一指定元素外的点击事件，判断当前点击事件是否不是其本身
csl125的博客
12-24 5663
html &lt;div v-clickoutside="handleClose"&gt;&lt;/div&gt; //当点击此div外的任何元素 将会触发 v-clickoutside="handleClose"的 handleClose 构造点击函数 const clickoutside = { // 初始化指令 bind (el, binding, vnode) { ...
检测用户是否在Vue组件之外点击了鼠标（vue3和vue2的方法）
Br不二
03-31 899
可以用于检测用户是否在Vue组件之外点击了鼠标。当用户在组件之外点击鼠标时，指令会触发一个回调函数，开发者可以在回调函数中执行相应的操作，例如关闭组件、隐藏弹出窗口等。
vue判断点击元素是否为指定元素外并让指定元素隐藏
weixin_44969815的博客
11-06 2953
根据 简书 DogRod的思路 这里用到了vue的自定义指令 详情参数可以在vue官网查询 html部分 <div v-clickout="list">xxx</div> //list为for循环的参数这里的list为binding.value //list可以改为自己定义的方法js逻辑则改用expression判断实现调用 <div v-if=...
Vue3 自定义指令：ClickOutside（点击当前区域之外的位置）
热门推荐
梓沐666的博客
04-19 1万+
哈喽，大家好，我是 SuperYing。今天我们聊一个 Vue3 自定义指令 — ClickOutside，顾名思义，就是处理点击当前区域之外的位置的场景。 Vue 指令 首先，我们先来回顾一下 Vue 指令 相关的知识点。 简介 Vue 指令是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是 单个 JavaScript 表达式。指令的职责是当表达式的值改变时，将其产生的连带影响，响应式的作用于 DOM。 注册方式 1.全局注册 通过 Vue 实例对象的 directive
Vue 自定义指令：ClickOutside（点击当前区域之外的位置）
qq_29715077的博客
03-21 1106
在util文件夹下生成clickoutside.js。使用clickoutside。vue3的使用方法参考。
v-clickoutside vue点击某个区域外会触发的事件
m0_64684712的博客
03-04 2079
v-clickoutside vue点击某个区域外会触发的事件
vue3解决点击元素之外执行某种操作
qq_36626404的博客
11-10 399
【代码】vue3解决点击元素之外执行某种操作。
vue子组件获取dom元素的方法
08-19
在Vue中，子组件获取DOM元素的方法有几种。一种是通过在子组件的模板中使用`:ref`指令来给DOM元素添加一个引用，然后在父组件中可以通过`$refs`来访问这个引用。例如，可以在子组件的模板中使用`:ref`指令来给一个div元素添加引用： ``` <template> <div ref="myDiv">这是一个div元素</div> </template> ``` 然后在父组件中，可以通过`this.$refs`来访问这个引用： ``` mounted() { console.log(this.$refs.myDiv); } ``` 另一种方法是通过在子组件的`mounted`钩子函数中使用`this.$el`来获取子组件的根DOM元素。例如： ``` mounted() { console.log(this.$el); } ``` 这样就可以获取到子组件的根DOM元素了。注意，这种方法只能在子组件的`mounted`钩子函数中使用，因为只有在组件挂载到DOM树上之后，才能获取到DOM元素。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [Vue.js实例学习：获取DOM元素](https://blog.csdn.net/b954960630/article/details/87739962)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* [Vue3中操作dom的四种方式，建议收藏！！！](https://blog.csdn.net/qq_44880095/article/details/128721041)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值