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

最新推荐文章于 2024-03-18 13:53:29 发布

柳韵成风

最新推荐文章于 2024-03-18 13:53:29 发布

阅读量676

点赞数 1

文章标签： vue.js 前端 vue elementui

本文链接：https://blog.csdn.net/weixin_47885520/article/details/130227755

版权

vue中默认弹出页面，点击空白处关闭或消失，但是有时需要不关闭

这是需要在el-dialog标签中增加:close-on-click-modal="false"

<el-dialog title="弹出框" 
    v-model="visible" 
    width="800px" 
    top="5vh" 
    :close-on-click-modal="false"
    append-to-body>

优惠劵

柳韵成风

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
vue取消弹出页面点击空白处关闭

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

扫一扫

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

10-16

最近小编接到这样的需求：弹出框（或Popover）在 show 后，点击空白处可以将其 hide。针对这个需求，小编整理了三种实现方式，如果大家对vue 点击空白隐藏节点问题感兴趣的朋友跟随小编一起看看吧

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

10-16

主要介绍了vue点击页面空白处实现保存功能,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下

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

vue 点击关闭el-popover

盖世小可爱的博客

11-24

5163

<el-popover ref="popover" placement="bottom" trigger="click" > <div> <el-form style="margin-left: 30px;" label-width="90px" size="small" :model="form.

[element-ui] 点击el-dialog区域以外，会关闭对话框的解决办法

最新发布

m0_61601708的博客

03-18

732

输入框时，点击el-dialog弹框内关闭按钮以外区域时，弹框关闭。当用户点击修改、新增等按钮弹出。

VUE中关闭表单后重置表单以及清空表单校验

cy19980605的博客

06-16

8984

关于关闭表单，清空表单校验，重置表单

element plus + vue3表单第一次数据未清空的bug问题解决

分享互联网的有趣知识~

12-23

2472

场景一：表单的添加和修改功能，公用同一个弹框，点击修改后，点击添加表单显示的是上次修改的数据。场景二：点击修改，数据回显到表单，然后点击取消关闭弹框，在关闭的时候使用resetFields()清空数据，第二次点击修改的时候，回显的数据可以清空，但是表单的值会默认到第一次回显的数据。而且点击添加的时候，默认展示的就是第一次回显的数据。

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

qq_43151592的博客

05-31

3937

效果展示：通过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组件弹框点击其他区域弹框关闭

Y_soon_start的博客

03-17

611

点击bigbox盒子之外的区域关闭该弹框。记得beforeDestroy()删除click事件 removeEventListener。方法返回一个布尔值，表示一个节点是否是给定节点的后代，即该节点本身、其直接子节点（contains(otherNode） otherNoder 是要测的节点。备注：otherNoder不是可选的，但是可以设置为null。接口的 contains()）、子节点的直接子节点等。

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

NIKKT的博客

04-04

3760

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

vue3写一个点击弹框之外的区域关闭弹框

weixin_42579969的博客

12-30

1369

<p>如果要在 Vue 3 中实现点击弹框之外的区域关闭弹框的功能，可以这样做：</p> <ol> <li><p>在组件的模板中，包含一个用于显示弹框的元素，并且将该元素的 <code>ref</code> 属性设置为 <code>popup</code>。这样可以使用 <code&g...

Vue项目element-ui弹窗组件el-dialog，阻止点击遮罩层关闭

zhichaogong的博客

06-15

7984

关于element-ui弹窗组件el-dialog，阻止点击遮罩层关闭的问题，以及全局处理和局部处理的方法前言在使用element-ui的组件时，有时候根据项目需求，需要修改组件默认的属性值。我们公司项目的需要在el-dialog弹窗组件中写入表单数据，由于表单数据比较多，有时候误触了el-dialog的遮罩层就关闭弹窗了，导致辛辛苦苦填入的数据被清空重置。所以需要阻止弹窗遮罩层的关闭事件。下面针对使用npm安装使用element-ui 1. 全局配置 npm引入，直接在main.js文件中写入如下

Vue 点击其他地方关闭弹窗

菜虚鲲的博客

11-18

2120

Vue 点击其他地方关闭弹窗 <!doctype html> <html lang="en"> <head> <title>Document</title> <script src="https://lib.baomitu.com/vue/2.6.12/vue.min.js"></script> <style> #box { position: fi

vue如何在用户要关闭当前网页时弹出提示的实现

10-15

主要介绍了vue如何在用户要关闭当前网页时弹出提示的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

vue解决弹出蒙层滑动穿透问题的方法

10-17

主要介绍了vue解决弹出蒙层滑动穿透问题的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

vue 下拉框自定义以及点击空白空白处关闭下拉框 vue的自定义事件directive

qq_45894929的博客

02-20

1072

<div class="search-bar-package search_bar-package" v-close> <div class="div_form"> <div class="opt"> 专业 <img src="../assets/images/sanjiao.png" alt .

Vue中如何在关闭表单时重置

weixin_45745641的博客

10-11

806

给el-dialog添加@close=“editDialogClosed”，在关闭对话框时会调用这个函数给el-form添加ref=“editFormRef” 写函数 // 监听修改文章对话框的关闭事件 editDialogClosed () { this.$refs.editFormRef.resetFields() }, 还要注意给el-form-item添加prop的值，也就是input绑定的值，这样在关闭对话框的时候，表单就会进行重置 <el-dialog.

vue + ElementUI 关闭对话框清空验证，清除form表单

weixin_33770878的博客

08-23

1656

前面跟大家提到过 elementUI验证的问题，那么今天就来看看点击对话框和关闭按钮怎么清空验证，清空form表单，避免二次点击还会有验证错误的提示 1、首先在你的对话框取消按钮加一个click事件，例如：（ps:：callOf里面的addGroupData和ref一一对应起来） <div slot="footer" class="dialog-footer"> ...

vue+iview 表单验证不成功会关闭弹窗解决方案

不积跬步何以至千里

01-26

1357

问题来源一个项目里必然会有表单提交需求表单里必定会有必填字段那么点击"提交"按钮时如果必填项未填 Modal弹出框是不能关闭的但现在相反弹窗关闭了解决方案如下表单 <Modal v-model="employeeEntryInformationModel" title="添加入职信息'" @on-cancel="cancel('employeeEntryInformationForm')" @on-ok="submit('employeeEntryInformationForm')"

Vue2+element动态弹框表单组件--配置化--低代码（公司内部统一化）

qq_41068362的博客

03-11

4588

动态表单弹框--可json配置化、低代码、自由度高、容易使用。

vue2实现Popup弹出层点击空白处关闭

06-09

在 Vue 2 中实现 Popup 弹出层点击空白处关闭的功能，可以通过以下步骤实现： 1. 在 Popup 组件中添加一个遮罩层，并绑定一个点击事件，当点击事件触发时，执行关闭 Popup 的方法。 2. 在子组件中添加一个 `$emit`...

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

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交