Vue中点击组件后即可关闭组件的实现方法

这次给大家带来Vue中点击组件后即可关闭组件的实现方法,Vue中点击组件后即关闭组件的注意事项有哪些,下面就是实战案例,一起来看一下。

Vue定义全局点击函数,参数为点击的回调函数。

Vue.prototype.globalClick = function (callback) { //页面全局点击 $(document).click(callback);}

登录后复制

组件挂载后监听全局的点击事件

mounted:function () { this.globalClick(this.handleClickOut);},

登录后复制

隐藏元素。

取到dom节点,判断父级是否存在来判断是否需要来关闭

handleClickOut:function (event) { if($(event.target).parents(".sys-add-user-dialog").length == 0){  //隐藏元素 }},

登录后复制

相信看了本文案例你已经掌握了方法,更多精彩请关注【创想鸟】其它相关文章!

推荐阅读:

vue.js怎么在标签属性中插入变量参数

vue-cli打包代码时怎么抽离项目相关配置文件

以上就是Vue中点击组件后即可关闭组件的实现方法的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2778394.html

(0)
上一篇 2025年3月8日 15:30:23
下一篇 2025年3月8日 15:30:28

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • vue注册组件有几种方法

    这次给大家带来vue注册组件有几种方法,使用vue注册组件的注意事项有哪些,下面就是实战案例,一起来看一下。 1、全局注册(这种方式注册组件必须在vue实例化之前声明) Vue.component(‘tag-name’,{}) 登录后复制 …

    编程技术 2025年3月8日
    200
  • use怎么注册Vue的全局组件

    这次给大家带来use怎么注册Vue的全局组件,use注册Vue全局组件的注意事项有哪些,下面就是实战案例,一起来看一下。 Vue中的组件和指令分为局部组件、局部指令和全局组件、全局指令。对于注册有一定数量的全局指令和全局组件时,官方文档中的…

    编程技术 2025年3月8日
    200
  • vue 2 使用Bus.js实现非父子组件通信

    本篇文章将要和大家分享关于vue 2 使用bus.js实现非父子组件通信的方法,有需要的小伙伴可以参考一下 vue2中废弃了$dispatch和$broadcast广播和分发事件的方法。父子组件中可以用props和$emit()。如何实现非…

    编程技术 2025年3月8日
    200
  • vue 开发一个按钮组件的示例代码_vue.js

    本篇文章主要介绍了vue 开发一个按钮组件的示例代码,现在分享给大家,也给大家做个参考。一起过来看看吧 最近面试,被问到一个题目,vue做一个按钮组件; 当时只是说了一下思路,回来就附上代码。 解决思路: 通过父子组件通讯($refs 和 …

    编程技术 2025年3月8日
    200
  • 使用Vue构建可重用的分页组件

    分页组件在web项目中是十分常见的组件,让我们使用vue构建可重用的分页组件,关于基本结构和相关事件监听大家参考下本文 Web应用程序中资源分页不仅对性能很有帮助,而且从用户体验的角度来说也是非常有用的。在这篇文章中,将了解如何使用Vue创…

    2025年3月8日 编程技术
    200
  • Angular开发实践(四):组件之间的交互

    在angular应用开发中,组件可以说是随处可见的。本篇文章将介绍几种常见的组件通讯场景,也就是让两个或多个组件之间交互的方法。 根据数据的传递方向,分为父组件向子组件传递、子组件向父组件传递及通过服务传递三种交互方法。 父组件向子组件传递…

    编程技术 2025年3月8日
    200
  • JS如何对组件实现动态处理

    这篇文章主要介绍了js如何对组件实现动态处理,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 组件的动态添加,p的复制   对组件的动态处理是动态网页的必备技能。这种情况基本无法避免。就好比如客户需要填写表单,但…

    2025年3月8日 编程技术
    200
  • 如何解决vue开发中父组件添加scoped后无法修改子组件样式问题

    在vue的开发中,我们需要引用子组件,包括ui组件(element、iview)。但是在父组件中添加scoped之后,在父组件中书写子组件的样式是无效果的。去掉scoped之后,样式可以覆盖。但这样会污染全局样式,为了解决这个问题,vue-…

    编程技术 2025年3月8日
    200
  • express默认日志组件morgan的详细介绍

    这次给大家带来express默认日志组件morgan的详细介绍,使用express默认日志组件morgan的注意事项有哪些,下面就是实战案例,一起来看一下。 章节概览 morgan是express默认的日志中间件,也可以脱离express,…

    编程技术 2025年3月8日
    200
  • react native的悬浮按钮组件使用详解

    这次给大家带来react native的悬浮按钮组件使用详解,使用react native悬浮按钮组件的注意事项有哪些,下面就是实战案例,一起来看一下。 React Native悬浮按钮组件:react-native-action-butt…

    2025年3月8日
    200

发表回复

登录后才能评论