vue项目点击外部组件消失

最新推荐文章于 2024-08-27 16:10:45 发布
最新推荐文章于 2024-08-27 16:10:45 发布
阅读量693 收藏
点赞数
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/ducaijia_123/article/details/93776408
本文介绍了一个使用JavaScript在页面加载完成后，为body元素添加点击事件监听器的方法，该监听器会在用户点击页面任意位置时，将组件的显示状态设为false，实现组件的自动隐藏功能。

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

 mounted(){
        document.body.addEventListener('click',()=>{
            this.isShow = false;
        },false);
    }

ducaijia_123
关注
VUE—封装弹窗组件并且点击空白出消失
Poppy_LYT的博客
04-22 1039
封装弹窗的vue页面 起名叫PosterModal <div v-if="visible" class="modal-mask" catchtouchmove='true' @click="closeModal"> <div class="modal-content" @click.stop="openModal”> // .stop阻止冒泡 </di...
0到1搭建前端Vue2项目
最新发布
菜鸟的博客
06-05 1596
1.1 打开 cmd 命令提示符进入到存放项目的目录，在命令提示符上使用 “ vue create 项目名” 命令创建项目。1.2 之后可以选择 vue 版本，虽然现在 vue2 已经停更，但是还是值得学习的。1.3 等待初始化 vue 脚手架后，会出现蓝色的两条命令，依次执行它们即可启动 vue。vue脚手架启动成功后会出现蓝色的两个网址，无论是哪个网址都可以打开页面。1.4 浏览器输入网址后界面如下。
基于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
Vue加JQuery实现点击其他地方弹窗消失的功能
weixin_41843107的博客
11-08 261
【代码】【无标题】Vue加JQuery实现点击其他地方弹窗消失的功能。
vue中点击弹框或下拉之外的地方 弹框下拉消失
qq_42257741的博客
01-14 792
html 板块： <div ref="select"></div> js 板块： mounted()=>{ document.addEventListener('click',(e) => { if(this.$refs.select.contains(e.target)) return this.show = false }) } 为你的弹框或者下拉选
Vue v-model组件封装(类似弹窗组件)
10-15
在这个例子中，`prop` 设置为 `'checked'`，意味着外部组件通过 `checked` 属性传递值；`event` 设置为 `'change'`，表示当值改变时，组件会触发 `'change'` 事件并传递新的值。 现在，让我们转向封装一个类似弹窗...
Vue自定义toast组件的实例代码
10-18
在实现时，加载组件需要能够展示加载动画，并且在指定的duration时间后自动消失。 接下来，需要创建一个index.js文件来完成Toast组件的实例化。在这个文件中，首先导入了Vue核心库和Toast组件，然后定义了...
基于Vue2x的picker组件
08-12
6. **过渡效果**：Vue2.x 提供了内置的过渡效果库，可以为组件的出现和消失添加动画。`picker`组件在打开和关闭时可能需要这些过渡效果。 7. **自定义指令**：如果需要更复杂的交互，可以定义自定义指令，如用于...
vue2.0 - layout组件（五）SideBar和Main页面布局
sqLeiQ的博客
06-16 2157
vue2.0 Layout组件
解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题
10-14
主要介绍了解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
点击其他地方弹层消失
sinat_24496253的博客
02-10 1050
点击其他地方弹层消失 body,html{ width:100%; height:100%; } .opciaty{ width:200px; height:200px; background:#000; opacity:0.5; filter:alpha(opacity=5); position:absolute; top:50%; left:50%; margi
vue点击其他地方让弹框消失的功能怎么写
weixin_51747462的博客
04-20 1252
vue点击其他地方让弹框消失的功能怎么写；vue用@blur事件让弹框消失的功能怎么写
实例：vue中点击空白区域关闭某个div图层
weixin_30621919的博客
05-25 768
<template> <div class="search" ref="searchMain"> <el-input v-model="value" placeholder="请输入搜索内容" ref="input" @focus="getFocus" @input="changeVal" @clear='...
在Vue中点击某个元素以外的元素时让这个元素隐藏或关闭
qq_59224656的博客
05-13 1678
在实际开发中，可能会有点击某个元素以外的元素时让这个元素隐藏或关闭的需求。在Vue中实现则更加简单。为全局document添加click事件，判断是否为指定节点及其子节点，如果不是则隐藏该指定节点。为span加上ref 以便于获取该DOM节点。
vue中beforeDestroy生命周期钩子
servepeople的博客
08-27 3235
组件销毁：组件在被 Vue 销毁之前会调用钩子，在这时你可以执行清理操作。切换页面：在 Vue 单页应用中切换路由时，旧页面的组件会被销毁，此时钩子会被调用。保证：在正常的 Vue 销毁流程中，一定会被调用，但在某些特殊情况下（如关闭浏览器）不能完全保证。a.了解destroyed钩子与的区别和用途。b.了解 Vue 3 中的和生命周期钩子。
Vue 监听某个元素以外的区域被点击
weixin_44523517的博客
03-01 1835
Vue 监听某个元素以外的区域被点击
VUE渲染后元素丢失（或组件丢失）的解决方案
Hershey's Blog
02-05 4880
VUE渲染后元素丢失（或组件丢失）的解决方案背景考虑因素解决方案示例项目遇到的问题代码示例（官网上的代码）问题原因解决方案解决后代码示例 背景 最近需要整合各种微服务组件，但大多数微服务组件没有界面或界面不符合需求，所以决定为微服务组件界面化或对已有界面进行更改，以达到统一的界面风格，为整体微服务系统提供一整套可视化服务 考虑因素 开发上手难度 如果需要进行前后端分离，迁移改造难度 与当前公司所用前端框架是否适配 是否有可以进行较好的调试（热更新、近实时更新） 解决方案 由于多数微服务组件是构建于
Vue2简易弹框组件开发：借鉴SweetAlert
为了更好地重用这个Alert组件，可以考虑将其封装为一个插件，这样可以在多个Vue项目中方便地使用。另外，可以增加更多SweetAlert的特性，比如定时自动消失、自定义按钮、不同的主题样式等，以丰富Alert组件的功能。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值