下拉组件点击组件外关闭的方法

最新推荐文章于 2023-09-18 19:59:50 发布
最新推荐文章于 2023-09-18 19:59:50 发布
阅读量224 收藏
点赞数
文章标签： html5 vue.js es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43265785/article/details/118017088
版权
本文介绍如何在Vue.js应用中实现下拉组件的功能，当点击组件外部时自动关闭。通过监听document的点击事件，判断点击位置是否在组件内来决定是否关闭下拉组件。
摘要由CSDN通过智能技术生成

下拉组件点击组件外关闭的方法

代码结构

在这里插入图片描述
在这里插入图片描述

主要代码

    document.body.addEventListener('click', () => {
      this.isShow = false
    }, false)
闫嵩丶
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
[小程序]点击组件之外关闭组件
qq_40088255的博客
03-30 973
[小程序]点击组件之外关闭组件 [思路] 收集组件内所有元素的uid数组，判断点击事件的id是否在该uid数组内 直接上代码 (这是一个工具Hooks) import { useEffect, useState } from 'react'; const useOnClickOutside = ( containerId: string, // 组件所在整个页面的 id ref: any, // 要控制组件的ref handler: (e?: Event) => void, 点击元素之外
基于Vue中点击组件外关闭组件的实现方法
11-29
Vue定义全局点击函数，参数为点击的回调函数。 Vue.prototype.globalClick = function (callback) { //页面全局点击 $(document).click(callback); } 组件挂载后监听全局的点击事件 mounted:function () { this.globalClick(this.handleClickOut); }, 隐藏元素。 取到dom节点，判断父级是否存在来判断是否需要来关闭 handleClickOut:function (event) { if($(event.target).parents(".sys-a
解决antd中Dropdown点击iframe无法关闭的问题
最新发布
txf666的博客
09-18 442
解决antd中Dropdown点击iframe无法关闭的问题
antd的下拉菜单dropdown组件，如何控制点击空白处时，二级菜单一层一层收起，且阻止页面其他点击事件
前端小白菜的菜园子
11-10 1万+
前言：下文中提到的下拉框、对话框以及其他UI组件都是antd UI库中的，更多操作请看antd官方文档API，点击此处跳转至antd的下拉菜单dropdown组件官网。 情景/目标：工作中遇到的需求： 1、当下拉菜单展开多层时（如下图 有二级下拉菜单展开），点击页面其他地方，只是收起二级菜单，一级菜单不收起，再次点击收起一级菜单。antd默认点击别处，展开的菜单全部收起 2、当页面中有下拉菜单展开时，点击空白处任何地方，都是收起一层下拉菜单，页面中下拉菜单全部收起后，点击、双击等操作才会出发页面.
Vue 事件委托学习（Dropdown 下拉菜单点击其他地方消失）
黄彪博客
11-01 3100
事件委托简单案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-e...
Vue.js下拉菜单组件使用方法详解
01-19
本文实例为大家分享了Vue.js下拉菜单组件的具体实现代码，供大家参考，具体内容如下 效果 #### 入口页面 index.html <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <...
在Vue组件中获取全局的点击事件方法
10-18
例如，一个常见的需求是点击组件外部时关闭某个弹出或者下拉菜单。本篇文章将介绍在Vue组件中获取全局点击事件的三种方法，并重点推荐一种最佳实践。 首先，我们来看一下这个问题的使用场景：假设有一个“用户列表...
vue下拉菜单组件（含搜索）的实现代码
10-17
`created()`函数在组件实例创建后调用，这里用于初始化`datalist`并添加事件监听器，监听文档的点击事件，当点击组件外部时关闭下拉列表。 4. **方法**： - `selectToggle(data)`：当用户点击列表项时，更新当前...
metamask-firefox-10.8.2(1).zip
01-04
metamask-firefox-10.8.2(1).zip
uniapp、微信小程序：点击空白/蒙版关闭弹窗
Shimeng_1989的博客
11-04 6788
uniapp、微信小程序：点击空白/蒙版关闭弹窗
禁止dropdown单击后消失
easyboot的专栏
11-29 1295
HTML 代码  &lt;div class="col-md-1"&gt; &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt; &lt;i class="fa fa-gears"&gt;&lt;/i&
antd-dropdown问题总结
神zhi殇的博客
09-11 1万+
&lt;nz-dropdown&gt; &lt;a nz-dropdown&gt; Hover me &lt;i class="anticon anticon-down"&gt;&lt;/i&gt; &lt;/a&gt; &lt;ul nz-menu nzSelectable&gt; &lt;li nz-menu-i
antd的Dropdown组件阻止事件冒泡
热门推荐
吴小迪的博客
07-30 4万+
笔者在开发的过程中遇到了使用Dropdown组件在点击事件的时候阻止事件冒泡。 阻止事件冒泡就是使用event对象的stopPropagation()方法。 Dropdown组件想要把每一个阻止事件冒泡就这样写： <Dropdown overlay={ <Menu> <Menu.Item onClick={eve => { // 修改要做...
vue,点击除组件外的元素，自动关闭组件或元素
dxfan5的专栏
01-13 1327
vue,点击除组件外的元素，自动关闭组件或元素
【Vue】点击组件外部隐藏组件自身
汪小穆的博客
10-25 5751
前言：在开发组件的时候，点击组件外部隐藏组件自身的这种情况很长见到，例如：时间选择框组件，下拉选择框组件等等。  
【075】Vue.js自定义下拉列表，如何实现在下拉列表区域外点击即可关闭下拉列表的功能
zhangchao19890805的专栏
05-30 8626
在开发过程中，为了效果好看，往往需要自己开发一个下拉列表，而不是使用 HTML 自身的 select 下拉列表。然而当编写自定义下拉列表的时候，就会碰到一个问题：如果用户在下拉列表的范围外进行鼠标点击的操作，如何关闭已经打开的下拉列表？ 解决思路如下：在 DOM 的根节点上添加一个 click 事件，同时下拉列表内阻止事件的默认行为和冒泡。当响应这个点击事件的时候，说明是在下拉列表范围外的点击（
Vue中点击组件外关闭组件的实现方式
zjw0742的博客
09-03 9357
Vue定义全局点击函数，参数为点击的回调函数。 Vue.prototype.globalClick = function (callback) { //页面全局点击 $(document).click(callback); } 组件挂载后监听全局的点击事件 mounted:function () { this.globalClick(this.handleClickOut);
React怎样实现点击其他地方隐藏弹出的菜单
周大侠的博客
01-09 3654
我们经常遇到这种需求: 点击导航栏弹出菜单, 点击其他地方收回菜单. 前者比较容易实现, 在onClick中可以设置state, 通过state来判断组件的className进而实现菜单组件的显示与隐藏. 后者, 点击其他地方收回菜单, 应该怎么弄呢? 比较好的实现方法步骤如下: 在componentDidMount()中添加document的监听事件, 监听全局的click co...
vue关闭el-select组件的下拉窗
07-28
要关闭el-select组件的下拉窗，可以通过设置el-select的visible属性为false来实现。在Vue中，可以通过在data中定义一个变量来控制visible属性的值，然后在需要关闭下拉窗的地方修改这个变量的值为false。例如，在上述代码中，可以在data中定义一个名为showDropdown的变量，并将其初始值设置为true。然后，在需要关闭下拉窗的地方，可以通过修改showDropdown的值为false来关闭下拉窗。具体的代码如下所示： ```javascript export default { data() { return { showDropdown: true, // 控制下拉窗的显示与隐藏 formInline: { // 表单数据 // ... } } }, methods: { // 其他方法 // ... closeDropdown() { this.showDropdown = false; // 关闭下拉窗 } } } ``` 然后，在el-select组件中，可以通过使用v-if指令来根据showDropdown的值来控制下拉窗的显示与隐藏。具体的代码如下所示： ```html <el-select v-model="formInline.stationName" @change="onTitleChange" v-if="showDropdown"> <!-- 下拉选项 --> </el-select> ``` 通过调用closeDropdown方法，可以关闭el-select组件的下拉窗。 #### 引用[.reference_title] - *1* *2* *3* [VUE的el-select下拉框基本用法](https://blog.csdn.net/bbs11007/article/details/125839936)[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^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值