vue 点击空白处隐藏弹窗

最新推荐文章于 2024-06-27 08:20:19 发布

新宇最优秀

最新推荐文章于 2024-06-27 08:20:19 发布

阅读量1.1k

点赞数 2

文章标签： vue.js

本文链接：https://blog.csdn.net/tendernessxy/article/details/112327144

版权

本文介绍如何在Vue.js应用中实现点击页面空白区域时自动隐藏弹窗的功能，通过编写特定函数并在组件的mounted钩子中调用来达到目的。文章配以gif演示效果。

摘要由CSDN通过智能技术生成

首先写一个函数：

closeChart() {
   
  document.addEventListener("click", e => {
   
    const iconEl = document.querySelector(".socre");

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

新宇最优秀

关注关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
3
评论
vue 点击空白处隐藏弹窗

vue 点击空白处隐藏弹窗
复制链接

扫一扫

Vue 实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩）

10-16

以上三种方法都能有效地实现点击空白区域隐藏Vue中的节点。选择哪种方式取决于具体项目的需求，如组件复用性、代码简洁性和性能等因素。在实际开发中，自定义指令和遮罩层方案可能更为常见，因为它们可以更方便地...

vue3 + element plus 使用el-button焦点问题失焦操作

weixin_55042716的博客

11-11

3449

当我点击按钮，弹出了个提示弹窗，但是，当我弹窗关闭的时候，按钮还是处于激活的状态。点击按钮后会有激活的样式，除非点击其他地方才能取消掉，

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

vue中自动失去焦点_vuejs 失去焦点，单击全局隐藏某些浮动元素

weixin_39840153的博客

01-13

2251

先看图，我们想实现一个这样的功能，单击高级搜索，弹出一个div，div里面是slot进去的，有各种标签，包括表单元素。再单击其他区域，会隐藏这个弹出的div，类似blur事件。麻烦给点思路实现这个组件(功能)，写一个这样的组件，弹出框的内容slot进去，里面的表单可以进行操作输入，以及动态渲染dom结点。请问有朋友实现过类似的功能吗，麻烦给点思路。主体上可以看这个vue-weui，对于点击sl...

Popover 点击空白区域如何消失

最新发布

qq_42931285的博客

06-27

258

Popover 点击空白区域如何消失

vue cli 调取百度地图使用自定义弹框BMapLib.InfoBox（）创建的弹框默认关闭按钮如何隐藏

rpf1234的博客

06-07

1421

vue cli 调取百度地图使用自定义弹框BMapLib.InfoBox（）创建的弹框默认关闭按钮如何隐藏代码如下 index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=1920,initial-scale=1.0"/> <title>zhihuixunhe&

vue取消弹出页面点击空白处关闭

weixin_47885520的博客

04-18

804

这是需要在el-dialog标签中增加:close-on-click-modal="false"vue中默认弹出页面，点击空白处关闭或消失，但是有时需要不关闭。

Vue Input 失去焦点 @blur事件 & 获得焦点 ref

weixin_44666116的博客

10-15

1万+

一、失去焦点 demo 1 关键 @blur <input v-model="testVal" @blur="test"></Input> methods: { test(){ console.log('testVal------------- ',testVal) } } 第二种关键 @blur.native.capture <input v-model="testVal" @blur.native.capture="test">&

vue点击页面空白处实现保存功能

10-16

在Vue开发过程中，有时我们需要实现特定的交互效果，例如点击页面空白处实现保存功能。这个功能常见于编辑表格等场景，允许用户双击表格行进行编辑，然后在点击其他非编辑区域时自动保存更改。以下将详细介绍如何在...

vue3 拖拽放大缩小弹窗demo

04-08

vue3 拖拽放大缩小弹窗demo

详解vue中点击空白处隐藏div的实现（用指令实现）

08-27

Vue 中点击空白处隐藏 div 的实现（用指令实现）在 Vue 中，想要实现点击空白处隐藏 div 的功能，需要使用自定义指令来实现。本文将详细介绍如何使用指令来实现这个功能。首先，需要了解 Vue 中的指令是什么？...

VUE2实现事件驱动弹窗示例

08-29

"VUE2实现事件驱动弹窗示例详解" 在本篇文章中，我们将详细介绍如何使用 VUE2 实现事件驱动弹窗示例。事件驱动弹窗是一种常见的交互方式，它可以根据用户的操作来弹出相应的提示信息。下面我们将详细介绍如何使用 ...

vue el-dialog 点击空白不消失

然而老干妈早就看穿了一切

11-16

853

<template> <el-dialog :close-on-click-modal="false" :visible.sync="dialog" :title="编辑信息" append-to-body width="570px"> </el-dialog> </template> 添加： :close-on-click-modal="false"

vue项目指定页面显示某组件，其它页面隐藏

xuanyuyao的博客

09-14

1910

vue项目指定页面显示某组件，其它页面隐藏，常用于底部导航栏的显示隐藏 1、路由配置meta 2、页面内使用$route.meta.istrun

vue 中点击空白处隐藏弹框（用指令实现）

web_rookies的博客

11-03

814

vue通过设置指令，实现点击空白处隐藏弹窗代码如下： html结构增加 v-clickoutside指令初始化指令最后在methods方法里面添加添加事件

Vue子组件的显示与隐藏

热门推荐

Rhine

04-14

5万+

在使用Vue开发前端页面的过程中，经常都会遇到需要在父组件中控制子组件的显示/隐藏。就让我们一起来看看，Vue中怎么实现吧！

vue中实现某一些路由页面隐藏导航栏的功能

从入门到放弃的博客

06-04

1万+

为了将导航栏显示在每一个页面中，可以将导航栏与<router-view>放在同一级显示，如下： <header> ... </header> <router-view></router-view> 但是，在某些时候，我们需要隐藏导航栏显示，比如登录界面，为了实现导航栏的隐藏，可以使用如下代码： <header v-...

vue 实现点击弹出框以外的地方，隐藏弹出框

岁末zzz的博客

04-29

6626

<template> <div> <ul> <li v-for="(item,index) in data1" :key="item.id"> <span @click.stop="toggle(index)"></span> ...

vue 子路由不写router view可以显示吗_portal 在 vue 中的使用

weixin_39654823的博客

12-12

1363

之前在学 React 的时候了解过 portal，简单的来说就是可以将子组件渲染到父组件以外的地方。官网上说 portal 的典型用例是当父组件有overflow: hidden或z-index样式时，但你需要子组件能够在视觉上“跳出”其容器。例如，对话框、悬浮卡以及提示框。但是当时对此例并无太多感觉，这就导致了我一度以为这是个没什么卵用的 API，大多数的使用场景应该是在封装一些公共组件上。但是...

vue 实现点击空白区域关闭弹窗

qq_43151592的博客

05-31

4196

效果展示：通过contains判断点击区域是否包含弹框 <template> <div ref="list"> <span @click="is_list_show=!is_list_show">点击</span> <ul class="head-list-select" v-if="is_list_show"> <li>菜单1</li> <li>菜

vue点击空白处弹出框取消

04-22

对于这个问题，我可以提供以下代码示例作为参考： ... ...<div class="mask" v-if="showModal" @click="hideModal"></div> 确认弹出框 ...这样，就完成了一个简单的 Vue 点击空白处弹出框取消的实现。