记录 vue自定义指令实现展示搜索记录，点击其他区域隐藏

最新推荐文章于 2025-05-14 15:19:09 发布

weixin_30362233

最新推荐文章于 2025-05-14 15:19:09 发布

阅读量398

点赞数

CC 4.0 BY-SA版权

文章标签： javascript java ViewUI

原文链接：http://www.cnblogs.com/xiaxuening/p/10974787.html

本文详细介绍了如何在Vue中实现点击组件外部区域时关闭组件的功能。通过自定义指令bind和unbind方法，监听文档点击事件，并判断点击目标是否为组件本身。若非组件本身，则调用绑定的函数，如handleClose，实现组件关闭。文章还提到了el.contains(e.target)用于判断点击元素是否为组件元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// const clickoutside = {
//   bind(el, binding,) {
//     function documentHandler(e) {
//   // 这里判断点击的元素是否是本身，是本身，则返回
//       if (el.contains(e.target)) {
//         return false;
//   }
//   // 判断指令中是否绑定了函数
//       if (binding.expression) {
//   // 如果绑定了函数 则调用那个函数，此处binding.value就是handleClose方法
//         binding.value(e);
//       }
//  }
//  // 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听
//     el.__vueClickOutside__ = documentHandler;
//     document.addEventListener('click', documentHandler);
//   },
//   unbind() {
//  // 解除事件监听
//     document.removeEventListener('click', el.__vueClickOutside__);
//     delete el.__vueClickOutside__;
//   },
// };

contains(),只能去判断DOM，不能像Java 那样使用！

转载于:https://www.cnblogs.com/xiaxuening/p/10974787.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_30362233

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

实现 Vue 右键菜单组件

loop_git667的博客

09-23

415

在前端开发中，右键菜单是一种常见的交互方式，它可以为用户提供快捷操作和更好的用户体验。本文将介绍如何使用Vue框架实现一个简单的右键菜单组件，并提供相应的源代码。在该方法内部，我们可以对菜单项的点击事件进行逻辑处理。同时，我们还设置了菜单项的样式，包括鼠标指针样式和鼠标悬停时的背景颜色。要在应用中使用该右键菜单组件，你需要在父组件中引入并注册它。然后，你可以在需要显示右键菜单的元素上监听右键点击事件，并在事件处理函数中设置。在Vue的单文件组件中，我们可以使用。来显示菜单，例如，当用户右键点击某个元素时。

vue项目里很实用的全局Vue自定义指令

qq_37635012的博客

02-09

495

新建 directives/index.js 文件import copy from './copy' import longpress from './longpress' // 自定义指令 const directives = {在 main.js 引入并调用bind: 只调用一次，指令第一次绑定到元素时调用，可以定义一个在绑定时执行一次的初始化动作。inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。

参与评论您还未登录，请先登录后发表或查看评论

vue实现右键菜单

hobtdto的博客

05-10

1009

自己写的右键菜单组件文章目录代码目录结构代码index.jsindex.vueitem.vue使用全局注册组件内注册 . 代码目录结构 ├── src ├── components └── context-menu ├── index.js ├── index.vue └── item.vue 代码 index.js // src/components/context-menu/index.js export functio.

Vue实现右键菜单（vue-contextmenu模块）

Hello World

04-06

7083

文章目录*Vue实现右键菜单（vue-contextmenu模块）*一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 Vue实现右键菜单（vue-contextmenu模块）一、pandas是什么？二、使用步骤 1.引入库 2.读入数据总结代码如下（示例）： data = pd.read_csv( 'https://labfile.oss.aliyuncs.com/courses/1283/adult.data.csv') print(data.head()) 每天一个提升

vue点击元素自身之外触发事件指令

qq_43358160的博客

01-11

2621

1注册指令 Vue.directive('clickoutside', { bind(el, binding) { function handler(e) { if (el.contains(e.target)) { return false; } let isReturn = false binding.arg.map(item => {

vue在表格中实现右键菜单

想了半天，还不知道写点什么

04-22

1万+

为表格数据添加右键菜单功能

vue设置标签自定义属性_分享8个非常实用的Vue自定义指令

weixin_35453718的博客

02-22

2040

在 Vue，除了核心功能默认内置的指令 ( v-model 和 v-show )，Vue 也允许注册自定义指令。它的作用价值在于当开发人员在某些场景下需要对普通 DOM 元素进行操作。Vue 自定义指令有全局注册和局部注册两种方式。先来看看注册全局指令的方式，通过 Vue.directive( id, [definition] )方式注册全局指令。然后在入口文件中进行 Vue.use()调用。批量...

vue实现匀速轮播效果

10-15

在Vue.js中实现匀速轮播效果是一种常见的需求，它能为用户展示一系列图片或内容，并自动进行平滑切换。以下是如何使用Vue实现这一功能的详细步骤和关键知识点： 1. **HTML 结构**：首先，我们需要创建一个基本的...

Vue - 实现双击显示编辑框；自动聚焦点击的显示框；点击编辑框外的地方，隐藏编辑框...

anchenhe9360的博客

03-05

2326

实现这三个功能的踩坑记录。 1. 需求在Vue中，有一个input，双击时编辑文本，点击该input节点外的其他地方，则取消编辑。那么这里有三个要实现的地方第一是双击显示编辑框。第二是自动聚焦点击的显示框。第三是点击编辑框外的地方，隐藏编辑框。一二点都是在startPipeLineNameEdit这个method中去实现。 2. 实现双击显示编辑框思路：使用两个sp...

Vue如何实现动态路由以及动态路由详解

weixin_45357661的博客

01-11

2910

Vue如何实现动态路由以及动态路由详解

vue 右键菜单插件简单、可扩展、样式自定义的右键菜单

10-17

主要介绍了vue 右键菜单插件简单、可扩展、样式自定义的右键菜单，本文给大家分享个例子，给大家及时的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下

vue右键显示菜单

qq_48763502的博客

05-14

912

{用于，即鼠标上下文菜单事件。这个事件可以用来处理右键点击的自定义行为，比如阻止浏览器默认的右键菜单，或者展示自定义的菜单。

vue添加自定义右键菜单

热门推荐

qq_38143787的博客

06-28

1万+

一、写原生方法 1.在所编辑的页面，需要添加右键菜单的元素，绑定contextmenu事件，如下： <li v-for="item in resourceList" :key="item.id" @click="handleClickFolder(item)" @contextmenu.prevent="openMenu($event,item)" >

vue 右键菜单功能

a474786378的博客

06-14

2070

vue，右键菜单

Vue右键菜单vue-contextmenu

mo911108的博客

08-11

3707

1.安装 npm install vue-contextmenu --save 2.main.js引入 import VueContextMenu from 'vue-contextmenu' Vue.use(VueContextMenu) 3.组件内使用 <ul class="nav taskPanel"> <li v-for="(item, index) in taskList" :key="it.

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

qq_29236119的博客

03-22

3210

在项目开发中搜索按钮点击出现搜索框内容，这个时候点击搜索框以外的内容，搜索框隐藏掉，如下所示： 1、源码 2、实现点击其他区域搜索框内容隐藏，如下： document.addEventListener('click', (e) => { if (this.$refs.showPanel) { let isSelf = this.$refs.showPanel.contains(e.target) if (!isSelf) { this.searchbox =

Vue 自定义右键菜单

SJX217906603的博客

06-29

7171

Vue 自定义右键菜单Vue 自定义右键菜单1、环境配置2、在组件代码里引用3、在html中编写右键菜单内容4、在JS里对右键菜单数据以及功能进行配置5、效果图 Vue 自定义右键菜单在Vue中可能涉及到对右键菜单的使用（比如右键选中删除），并且希望使用自定义的右键菜单条目。实现过程记录如下。 1、环境配置 vue echarts安装不赘述，这里需要使用特定的右键菜单插件: @xunlei/vu...

右键菜单 vue手写右键菜单

xiaoheisboy的博客

08-06

871

右键菜单

Vue简易右键菜单：实现轻便、高效的交互体验

gitblog_00044的博客

05-29

431

Vue简易右键菜单：实现轻便、高效的交互体验项目介绍 vue-simple-context-menu 是一款为 Vue.js 应用设计的简单上下文菜单组件。它适用于左键和右键点击，无需复杂的配置，即可轻松实现功能。该组件由 John Datserakis 开发，其核心理念是简洁且实用。项目技术分析 vue-simple-context-menu 遵循 Vue 的插件化设计理念，通过导入和注册组...

vue2实现列表滚动到每个item区域对应的标题栏吸顶

记录 vue自定义指令 实现展示搜索记录，点击其他区域隐藏

记录 vue自定义指令实现展示搜索记录，点击其他区域隐藏