el-dialog滑动关闭问题

已于 2022-08-09 14:06:46 修改
阅读量868 收藏 2
点赞数
于 2022-08-08 10:20:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42403906/article/details/126222462
版权

el-dialog Element UI close-on-click-modal 前端开发 Vue
关键词由CSDN通过智能技术生成

在使用el-dialog遇到一个鼠标往左滑el-dialog就自己关闭了，比如想全选文字结果他自己就关闭了

解决办法

在el-dialog标签处加上 :close-on-click-modal="false"

<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body :close-on-click-modal="false"></el-dialog>

Lbwnb丶
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue3+ElementPlus el-dialog里面的文件上传弹窗点击取消时自动关闭外面modal的问题
朝花夕拾的博客
06-07 667
点击文件上传按钮弹窗 然后取消时这个时候外面的dialog会自动关闭。去掉el-dialog里面的cancel方法
element-ui弹框dialog无故关闭问题
xuanyuyao的博客
11-23 2164
dialog无故关闭问题
el-dialog有滚动条，第一次打开滚动到底部，关闭，再次打开还在底部
qq_45894929的博客
12-10 3009
问题： el-dialog有滚动条，第一次打开滚动到底部，关闭，再次打开还在底部 解决： 使用append-to-body=“true” Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true 问题： 使用append-to-body="true之后，dialog中自己加类名写的样式不生效 解决： 将样式改为全局样式 ...
el-dialog 一些问题 局中滚动
weixin_30566063的博客
06-12 1197
.el-dialog { position: absolute; top: 50%; left: 50%; margin: 0 !important; transform: translate(-50%, -50%); max-height: calc(100% - 30px); max-width: calc(100% - 30px); display: flex; fle...
Element,el-dialog弹出层拖拽，处理边界和拖拽问题
岁月如歌去，十年弹指间
03-19 6311
import Vue from 'vue' // v-dialogDrag: 弹窗拖拽属性 Vue.directive('dialogDrag', { bind(el, binding, vnode, oldVnode) { const dialogHeaderEl = el.querySelector('.el-dialog__header'); co...
dialog 弹出窗和底部弹出窗的实现和动画效果
12-18
在Android应用开发中，对话框（Dialog）是一种常见的用户交互元素，用于向用户展示临时信息或请求用户进行决策。本文将深入探讨如何实现`Dialog`弹出窗以及底部弹出窗的效果，包括中间弹出和底部弹出这两种常见场景...
半透明dialog从左往右滑动显示
04-27
在Android开发中，创建一个半透明的Dialog并使其从屏幕左侧滑动进入的效果，可以为用户提供一种更加交互式和动态的界面体验。这种效果通常用于显示一些临时的通知或需要用户快速响应的信息，而不打断主应用流程。...
vue进入页面时滚动条始终在底部代码实例
12-11
const container = this.$el.querySelector(".chatBox-content-demo"); container.scrollTop = container.scrollHeight; }); } } } ``` 在`scrollToBottom`方法中，我们使用了Vue的`$nextTick`函数，确保在DOM...
vue解决弹出蒙层滑动穿透问题的方法
10-17
在Vue开发中，处理弹出蒙层滑动穿透问题是一个常见的前端交互细节问题。当用户在弹出的全屏蒙层上滑动时，如果没有得到妥善处理，滑动事件会穿透蒙层，继续影响到蒙层下面的可滑动列表，导致用户体验不佳。本文通过...
Dialog显示放大图片
01-21
这一功能使得用户可以在不离开当前界面的情况下，通过一个半透明的弹出窗口（Dialog）来查看图片的全貌，同时支持滑动浏览，增强用户体验。下面我们将详细探讨如何实现这一功能。 首先，我们需要了解Dialog的基本...
dialog设置弹窗关闭事件
weixin_43825727的博客
10-15 4552
我们在页面中使用dialog弹窗的时候，在非弹窗范围点一下弹窗就关闭了，所以这里有一个很好的解决办法。 <el-dialog :close-on-click-modal="false" :visible.sync="visible" :title="标题"> <textarea class="textarea"> {{ editContext }} </textarea> </el-dialog>
关于 Element-ui Dialog 引用时，在弹窗上 mousedown 后再在遮罩层 mouseup 引发的意外弹窗关闭问题的处理方案
qq_37750365的博客
11-27 1342
问题： Element-UI 作为当前较为成熟的 Vue 框架的 UI 组件，能有效的提高特异性不强的项目的界面开发。但是，作为一个要兼备处理多方面问题的第三方库，Element-UI 也存在着一些问题。比如 <el-dialog>。 在引用 <el-dialog> 时，尤其是将其作为编辑弹窗时，常常会有一个问题，便是在使用鼠标滑动选取弹窗中做文本选择时，若不注意将光标滑到弹窗窗体之外的遮罩层处，此时松开鼠标，就会导致弹窗被关闭掉的现象，十分影响使用体验。 当然，这种情况也有一
关于elementUI框架el-dialog input选中闪退bug
2301_76668873的博客
05-29 452
最近在做项目发现elementUI使用el-dialog 编辑时el-input 选中在谷歌浏览器会闪退关闭弹窗，在el-dialog标签中添加如下属性可解决闪退:close-on-click-modal="false"
解决el-dialog弹框出现后页面滚动条可滚动问题
最新发布
weixin_43923808的博客
05-16 924
在methods方法里写。
dialog导致闪退问题
zhang93421的博客
11-03 3744
用Dialog的时候出现了闪退，报了一个“Unable to add window -- token android.os.BinderProxy@164db98f is not valid; is your activity running”的异常 进入一个页面，等这个页面的数据加载完后弹出一个dialog，但是我在dialog还没弹出的时候就finish掉了这个页面，这个时候就会出现
解决点击el-dialog外的其他区域会导致该对话框关闭。
weixin_51396911的博客
03-10 8421
解决方式一 ： 将Dialog下的close-on-click-modal属性改为‘false’。 需要注意的是： 在使用close-on-click-modal属性时，必须在该属性前加“:”。 解决方式二： 可以通过before-close属性，在Dialog关闭时，让用户进行确认是否需要关闭。 before-close 仅当用户通过点击关闭图标或遮罩关闭 Dialog 时起效。如果你在 footer 具名 slot 里添加了用于关闭 Dialog 的按钮，那么可以在按钮的点击回调函数里加入 befo..
el-element中解决Dialog 对话框点击非内容区域关闭的问题
在无知中学习，在学习中成长，在成长中学习
07-14 903
el-element中解决Dialog 对话框点击非内容区域关闭的问题
element-ui dialog 鼠标误点关闭或关闭前弹窗提示
liuchenhaoy的博客
10-20 863
element-ui dialog 鼠标误点关闭或关闭前弹窗提示
ElementUI+vue中点击el-dialog区域以外，会关闭对话框的解决办法。
aurora
12-24 5665
需求目标： 当用户点击修改、新增等按钮弹出el-dialog输入框时，除了点击el-dialog弹框内关闭按钮以外，不能让该弹框关闭。 方法一：（添加:close-on-click-modal="false"） <el-dialog title="新增用户" :close-on-click-modal="false" :visible.sync="dialogEnrol" width="30%"> 弹窗内容 </el-dialog> 方法二：（全局配置） 在mian.js
el-dialog嵌套，关闭第二个el-dialog，第一个el-dialog的按钮点击不了
01-23
根据提供的引用内容，el-dialog嵌套时，如果关闭第二个el-dialog，可能会导致第一个el-dialog的按钮无法点击。这是因为第二个el-dialog被关闭后，遮罩层仍然存在，导致无法点击第一个el-dialog的按钮。 解决这个问题的方法是给第二个el-dialog添加append-to-body属性，并将其设置为true。这样，第二个el-dialog会插入到body元素上，保证了内外层el-dialog和遮罩层级关系的正确。 另外，也可以考虑使用el-dialog和ElMessageBox结合的形式，这样就不会出现弹窗被遮住的问题。 以下是一个示例代码，演示了el-dialog嵌套时关闭第二个el-dialog后，第一个el-dialog的按钮可以正常点击： ```html <template> <div> <el-dialog title="第一个el-dialog" :visible.sync="dialogVisible1" width="30%" > <p>第一个el-dialog的内容</p> <el-button type="primary" @click="openDialog2">打开第二个el-dialog</el-button> </el-dialog> <el-dialog title="第二个el-dialog" :visible.sync="dialogVisible2" width="30%" :append-to-body="true" > <p>第二个el-dialog的内容</p> <el-button type="primary" @click="closeDialog2">关闭第二个el-dialog</el-button> </el-dialog> </div> </template> <script> export default { data() { return { dialogVisible1: false, dialogVisible2: false }; }, methods: { openDialog2() { this.dialogVisible2 = true; }, closeDialog2() { this.dialogVisible2 = false; } } }; </script> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值