VUE—封装弹窗组件并且点击空白出消失

最新推荐文章于 2023-05-13 14:29:50 发布

Poppy_LYT

最新推荐文章于 2023-05-13 14:29:50 发布

阅读量981

点赞数

分类专栏： VUE 文章标签： vue 封装组件

本文链接：https://blog.csdn.net/Poppy_LYT/article/details/105681777

版权

本文介绍如何在Vue中封装一个名为PosterModal的弹窗组件，并实现点击弹窗外区域时自动关闭的功能。

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

封装弹窗的vue页面起名叫PosterModal

<div v-if="visible" class="modal-mask" catchtouchmove='true' @click="closeModal">
    <div class="modal-content" @click.stop="openModal”> // .stop阻止冒泡
    </div>
    <div class="modal-footer">
        <div class="footer-btn save-btn

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Poppy_LYT

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

Vue v-model组件封装(类似弹窗组件)

10-15

现在，让我们转向封装一个类似弹窗的组件。这个组件接收一个 `value` 属性，该属性是一个布尔值，用于控制弹窗的显示与隐藏： ```html 这是v-model的弹窗组件 export default { props: { value: { type...

vue的dialog点击屏幕空白处不关闭

m0_51700376的博客

02-21

1542

代码如下： <el-dialog :close-on-click-modal="false" ></el-dialog> 在dialog里面写 **:close-on-click-modal=“false”**即可。

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

vue中点击弹框或下拉之外的地方弹框下拉消失

qq_42257741的博客

01-14

736

html 板块： <div ref="select"></div> js 板块： mounted()=>{ document.addEventListener('click',(e) => { if(this.$refs.select.contains(e.target)) return this.show = false }) } 为你的弹框或者下拉选

在Vue中点击某个元素以外的元素时让这个元素隐藏或关闭

qq_59224656的博客

05-13

1542

在实际开发中，可能会有点击某个元素以外的元素时让这个元素隐藏或关闭的需求。在Vue中实现则更加简单。为全局document添加click事件，判断是否为指定节点及其子节点，如果不是则隐藏该指定节点。为span加上ref 以便于获取该DOM节点。

vue项目点击外部组件消失

ducaijia_123的博客

06-26

662

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

vue点击其他地方让弹框消失的功能怎么写

weixin_51747462的博客

04-20

1098

vue点击其他地方让弹框消失的功能怎么写；vue用@blur事件让弹框消失的功能怎么写

很棒的vue弹窗组件

08-30

Vue 弹窗组件是 Vue.js 框架中的一种常见组件，它能够提供一个弹出式的对话框，用于展示信息、警告或确认用户的操作。下面是 Vue 弹窗组件的详细介绍：一、Vue 弹窗组件的基本结构 Vue 弹窗组件的基本结构由三个...

vue3 封装一个全局通用弹窗提示组件（利用js调用类似于element）

06-21

在Vue3中，为了提高代码复用性和用户体验，开发者经常需要封装一些全局的、通用的UI组件，例如弹窗提示。本篇文章将详细介绍如何利用Vue3的特性来封装一个类似于Element UI的全局通用弹窗提示组件，并通过JavaScript...

在vue中封装的弹窗组件使用队列模式实现方法

10-15

总的来说，通过在Vue中使用队列模式来管理封装的弹窗组件，我们可以有效地解决多个弹窗同时出现时可能出现的混乱情况，确保弹窗的顺序显示和资源管理。这种实现方式不仅提高了代码的可维护性和可扩展性，还能为用户...

Vue 实现一个命令式弹窗组件功能

10-16

3. `hide`方法通过直接操作DOM来移除弹窗，并且销毁Vue实例，确保资源被正确清理。 4. `index.js`部分负责将`index.vue`中定义的组件通过`extend`变成构造函数，并通过`$mount`方法将实例挂载到body上。通过定义`...

Vue实现点击当前元素以外的地方隐藏当前元素(实现思路)

01-21

1. 绑定元素 2. mounted生命周期 3. 实现思路页面挂载完后，监听全局点击事件获取当前点击的元素，根据需求获取当前元素本身的属性判断当前点击元素与要隐藏的元素是否相同当前点击元素与要隐藏的元素不相同则隐藏 4. 最终效果接着看下vue实现点击目标元素外页面的其他地方隐藏弹窗方法：步骤1：给页面最外出的元素div加点击事件：@click=“popShow = false”。步骤2：给点击目标元素加点击事件：@click=“popShow = true”。备注：popShow 为控制弹窗显示与隐藏的标志。 PS：下面看下vue实现点击其他地方隐

VUE实现弹出框点击空白页弹框消失

NIKKT的博客

04-04

4211

同时，我们在 created 钩子函数中给 document 绑定了一个点击事件，用来监听页面的点击事件。在 onClickOutside 方法中，如果当前弹出框显示，并且点击的元素不是弹出框内的元素，则关闭弹出框。在Vue中创建一个弹出框组件，用来呈现弹出框的内容和样式。该组件应该接受两个 props，一个是 show，表示弹出框是否显示，另一个是 onClose，表示弹出框的关闭函数。在父组件中使用上述弹出框组件，同时在空白区域给document绑定点击事件，在点击非弹出框区域时关闭弹出框。

解决Dialog模态弹出点击遮罩层窗口自动关闭

wd728的博客

09-21

2468

Dialog模态弹出点击遮罩层弹出窗口会消失如果我们不希望自动消失，而是在点击弹出窗口的关闭按钮时才消失，需要设置下Dialog组件的“close-on-click-modal ”属性，默认为true,改为false即可。官方文档解释： <el-dialog :title=“提示” :visible.sync=“dialogVisible” @close=“closeDialog” :close-on-click-modal=“false”> ...

vue 点击弹窗外隐藏弹窗

岁末zzz的博客

08-01

3406

mounted() { this.$nextTick(function() { document.addEventListener("click", e => { this.closeBox(e); }); }); }, // 销毁document的点击事件 beforeDestroy() { document.re...

vue单击空白部分关闭组件

m0_56983341的博客

03-08

176

单击子组件空白部分关闭子组件

【Vue】点击父组件空白处让子组件隐藏

qq_43057018的博客

07-07

1623

在网上看到很多教程都是通过添加点击事件监听document.addEventListener，监听click事件当鼠标事件不发生在元素内部时，设置显隐属性为false代码实现如下： js代码但是这种方法并不能解决我的问题！我要操作的下拉窗口是子组件，会报错报错内容如下：Uncaught TypeError: _this.$refs.box.contains is not a function at HTMLDocument.eval不知道为什么在子组件上就不可以总之上面的方法适用于点击目标区域之外关

点击空白地方弹框消失在vue里使用原生写法

weixin_38912662的博客

06-15

491

在vue里使用原生写法，使点击空白地方消失

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

qq_43151592的博客

05-31

4264

效果展示：通过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封装一个自己的组件(Alert信息提示框)

从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！

07-02

4818

前言：在项目中经常遇到提示信息组件，我们·一般会用ui库来做。但是当ui库无法满足自己的需求（比如自定样式，ui库的样式很难改变）。下面就是简单封装一个自己的Alert信息提示框。一、实现思路 1.我们要做得是alert组件所以要预设几个字段 title -标题 message -提示信息 duration -显示时间 2.给出创建组件的方法 3.挂载到全局vue实例 4.调用二、实现过程 1.创建一个ui组件（Alert） <template> &lt...

vue element 弹窗组件封装