vue点击dom节点，显示下拉框；点击dom节点外，隐藏下拉框怎么实现？

最新推荐文章于 2023-06-15 21:19:00 发布
最新推荐文章于 2023-06-15 21:19:00 发布
阅读量418 收藏 1
点赞数
分类专栏： vue 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43069664/article/details/126384588
版权 
mounted() {
    document.addEventListener('click', this.tap)
  },
  methods: {
    tap(e) {
      if (this.$el.contains(e.target)) {
        this.isShow = true
      } else {
        this.isShow = false
      }
    },
    destroyed() {
      document.removeEventListener('click', this.tap)
    }
  },
浮生666
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue实现select下拉显示隐藏功能
10-16
主要介绍了vue实现select下拉显示隐藏功能,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
vue elementui select多选下拉库组件鼠标移出隐藏下拉框
最新发布
Z18834071903的博客
05-13 396
vue elementui select多选下拉库组件鼠标移出隐藏下拉框
vue 点击下拉框
weixin_30344995的博客
12-05 1535
data: { hide:false, zhi:"全部" }, <div class="item"> <div class="c2c-all" @click="hide ? hide=false : hide=true"> <span class="c2c-alla" st...
点击dom外，dom隐藏（vue）
qq_40942568的博客
08-09 488
点击dom外，dom隐藏（vue）
vue 点击页面其他位置 监听隐藏下拉
csstmg的博客
08-18 581
代码】vue 点击页面其他位置 监听隐藏下拉。
javascipt无限级可排序下拉框的实现
11-19
总之，实现JavaScript的无限级可排序下拉框涉及数据结构设计、遍历算法（迭代和递归）、DOM操作、事件监听、排序算法以及交互设计等多个方面。通过理解这些知识点，开发者可以创建出高效、易用的前端组件。
下拉框树
10-19
下拉框树的实现往往基于JavaScript库，如jQuery、React、Vue或Angular等，这些库提供了强大的DOM操作和事件处理功能，使得构建交互式界面变得简单。 首先，我们需要理解下拉框树的基本结构。它通常包含两个部分：一...
基于vue与elementui组件中talbe实现的无限级联treetable
08-10
首先，Vue.js是一个轻量级的前端框架，它通过声明式渲染数据来简化DOM操作，提高了开发效率。而Element UI是基于Vue.js设计的一套优雅的组件库，提供了诸如按钮、表格、下拉框等常见的UI元素。 在标题"基于vue与...
xml城市下拉框联动
05-25
在"xml城市下拉框联动"这个场景中，我们主要探讨如何利用XML来实现前端交互中的城市选择下拉框的联动效果。 首先，我们需要理解下拉框联动的基本概念。联动下拉框是指两个或多个下拉框之间存在关联关系，当用户在一...
动态级联下拉框构件
05-27
5. **jQuery或Vue/React/Angular等前端框架**：现代Web开发中，jQuery或者Vue、React、Angular等前端框架常常用于简化DOM操作和事件处理。它们提供了丰富的API和工具，可以便捷地实现动态级联下拉框的功能。 6. **...
Vue.js自定义下拉列表，如何实现在下拉列表区域外点击即可关闭下拉列表的功能
05-30
这个上传资源是为了配合我的博客 http://blog.csdn.net/zhangchao19890805/article/details/72808639。运行项目之前建议使用 yarn install 安装依赖。
点击页面其它地方隐藏该div
H3前端笔记
11-05 1254
思路一 第一种思路分两步 第一步：对document的click事件绑定事件处理程序，使其隐藏该div 第二步：对div的click事件绑定事件处理程序，阻止事件冒泡，防止其冒泡到document，而调用document的onclick方法隐藏了该div。 function stopPropagation(e) { if (e.
vue.js中实现在弹框外有鼠标点击事件时隐藏弹框
waillyer的博客
10-12 884
mounted() { // 监听页面的点击事件，如果鼠标在pop弹出框和按钮外点击，那么让弹出框不显示 document.onclick = () => { let e = e || window.event; let elem = e.srcElement || e.target; while (elem) { if (elem.id == "headerSearch" || elem.id == "S
vue.js（3.0）如何实现点击下拉列表或者弹出框以外的区域即可关闭下拉列表或者弹出框
weixin_49203377的博客
09-17 1559
背景：开发过程中，往往需要点击某个按钮或者地方，出现一个弹框进行选择，当用户在下拉列表的范围内进行鼠标点击的时候，关闭已经打开的下拉列表，如下图所示 解决思路：在DOM根节点上添加一个click事件，同时下拉列表阻止事件的冒泡，当响应这个点击事件的时候，说明在点击下拉列表范围外的点击（因为下拉列表内组织了事件的冒泡），就可以关闭已经打开的下拉列表 （因为在一个完整的应用中，可能会有很多场景需要这种区域外点击关闭的功能，比较合适的做法是把点击事件的具体处理逻辑放到各个组件中去），那么如何让各个子组件响应根组
vue中点击弹框或下拉之外的地方 弹框下拉消失
qq_42257741的博客
01-14 707
html 板块： <div ref="select"></div> js 板块： mounted()=>{ document.addEventListener('click',(e) => { if(this.$refs.select.contains(e.target)) return this.show = false }) } 为你的弹框或者下拉选
仿el-select实现点击按钮显示下拉框
qq_43651168的博客
06-15 1699
实现点击按钮显示下拉框，点击下拉框外面部分下拉框关闭（点击下拉框里面部分下拉框不关闭）
vue实现点击外部区域关闭下拉框，弹出层等操作
weixin_44494811的博客
04-17 2455
先上图： （录屏看不到鼠标点击位置，自行复制代码跑，环境vue2.x+iview） 描述需求：有一个下拉菜单，是通过点击按钮弹出的，再次点击按钮获取点击外部区域（除下拉菜单列表的区域）下拉菜单关闭。 实现思路： 1.点击按钮改变下拉菜单显示和隐藏的变量的状态 2.点击外部区域，判断所点击的区域是否点击在外部，可通过判断点击区域是否在下拉菜单列表区域，是，则不是外部区域。不是，则是外部区域，修改隐藏下拉菜单变量的状态。 代码： <template> <div> <D
下拉框选择选项时，不会显示到框上
qq_48826464的博客
05-24 513
最近在写代码时，遇到了一个奇怪的问题，下拉框动态绑定一个之后，当我选择下拉框下的选项时，并不会显示到框里，但是我切换标签，回来后又会显示，上网查了查怀疑是失去了响应式，所以我在该选择器上添加了一个change事件，使用$set将失去响应式的重新设置进去，问题就解决了！
vue 点击其他地方关闭下拉框
07-11
你可以通过在 Vue 中使用事件监听来实现点击其他地方关闭下拉框的功能。具体步骤如下： 1. 在下拉框的组件中，添加一个 data 属性，用于标记下拉框的显示状态，比如 `isDropdownOpen`，初始值为 `false`。 2. 在下拉框组件的外层元素上添加一个 click 事件监听器，用来捕获点击事件。 3. 在点击事件处理函数中，判断点击事件的目标元素是否是下拉框本身或其内部元素，如果是，则不执行任何操作；如果不是，则将 `isDropdownOpen` 设置为 `false`，关闭下拉框。 4. 在下拉框组件的模板中，使用 `v-show` 或 `v-if` 根据 `isDropdownOpen` 的值来控制下拉框的显示与隐藏。 以下是一个示例代码： ```vue <template> <div ref="dropdown" @click="handleClickOutside"> <!-- 下拉框内容 --> </div> </template> <script> export default { data() { return { isDropdownOpen: false }; }, methods: { handleClickOutside(event) { if (!this.$refs.dropdown.contains(event.target)) { this.isDropdownOpen = false; } } } }; </script> ``` 在上述示例中，通过 `ref="dropdown"` 给下拉框的外层元素添加了一个引用，在点击事件处理函数中使用 `this.$refs.dropdown.contains(event.target)` 来判断点击事件的目标元素是否在下拉框内。如果不在，则将 `isDropdownOpen` 设置为 `false`，关闭下拉框。 你可以根据实际情况调整代码，比如在点击其他地方关闭下拉框时，可能还需要处理其他逻辑，比如清除选中的值等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值