elementui中el-dialog初次打开能调mounted,再次打开不调,v-if解决

最新推荐文章于 2023-11-16 11:39:15 发布
最新推荐文章于 2023-11-16 11:39:15 发布
阅读量1.7k 收藏 1
点赞数
分类专栏： Vue2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40323256/article/details/119045401
版权

el-dialog组件在第一次使用的时候没有问题，mounted也可以触发，但是关闭dialog后再次弹出就不再触发mounted，导致可能没有办法及时获取到新的数据。

解决办法：使用v-if即可

 

疆~
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue3 在dialog中引入组件 第二次触发dialog中组件input没有回显
weixin_46463643的博客
07-15 571
vue3 在dialog中引入组件 二次触发组件中的input没有回显
基于element-ui对话框el-dialog初始化的校验问题解决
10-14
主要介绍了基于element-ui对话框el-dialog初始化的校验问题解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue mounted 调用两次的完美解决办法
10-17
在开发中发现其中一个页面moutned调用了两次，而其他页面正常，表示很懵逼，然后查找原因，终于找到了，其实归根到底是要知道mounted的调用机制问题。这篇文章主要介绍了vue mounted 调用两次的解决办法,需要的朋友可以参考下
vue路由在使用keep-alive缓存之后第二次进入页面created和mounted不执行问题及解决
jieyucx的博客
06-14 6796
Vue.js中keep-alive是一个内置组件，可以在需要缓存的组件上添加keep-alive标签，使得这个组件被缓存起来，不会被多次渲染和销毁。keep-alive组件有两个独立的生命周期钩子，分别是activated和。
【前端框架】Element UI Dialog 组件中执行 DOM 操作异常问题的分析与处理
抱朴守拙
09-26 1万+
开发指南 一、编码规约 1 命名准则 选择易读、易理解的标识符名称 可读性比简洁性更重要 不应使用缩写或首字母缩写词： 使用 OnButtonClick 而不是 OnBtnClick 严禁使用拼音命名 常量命名全部大写，单词间用下划线连接 抽象类以 Abstract/Generic/Base 开头，异常类以 Exception 结尾，测试类以 Test 结尾，枚举类以 Enum...
element-ui Dialog弹窗或者Drawer 抽屉传参,第二次打开传参失败
天鹅湖里的丑小鸭的博客
12-07 3784
element-ui弹窗或者抽屉传参 第一次打开传参正常，第二次不刷新页面再打开，不会传参 个人总结原因：是因为第一次打开，正常渲染传参，第二次打开，此时已经渲染过了，不会再进行第二次渲染 解决办法：销毁弹窗或者抽屉的子元素，element-ui有destroy-on-close属性 例 <el-drawer :title="titleName" size="100%" :modal="false" :wrapperClosable="false"
elementui更改el-dialog关闭按钮的图标d的示例代码
10-15
主要介绍了elementui更改el-dialog关闭按钮的图标，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo
10-16
主要介绍了elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
element ui 对话框el-dialog关闭事件详解
08-27
下面小编就为大家分享一篇element ui 对话框el-dialog关闭事件详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
在 el-dialog 中使用 el-form 时，弹框关闭无法清除校验状态和校验提示信息
elewen110的专栏
05-06 3913
在 closed 中先将 form 对象重置为初始值（跟data 中的值相同），然后在 $nextTick 中使用 clearValidate 清除校验状态即可。这样做的好处（跟其他解决方式相比）是没有任何使用体验上的损失。 <el-dialog :visible.sync="dialogVisible" @closed="dialogClosed" > <el-form :model="dialogForm" :rules="rules" ref="dialogForm"&.
el-dialog不执行mounted
weixin_43988238的博客
08-05 847
el-dialog不执行mounted 1.一个页面用表格展示数据，点击新增可以增一条数据，这种情况一般就是弹窗里面有表单 2.每次进展示页面发现都会调用表单的初始化方法，向后台请求数据，我就觉得奇怪，然后我新增完后，在展示页面点击编辑发现弹窗就不初始化，就只加载一次 3.解决方法： 父组件： <div v-if="isRegister"> <training_form></training_form> </div> 在子组件外面加一层，
打开弹框el-dialog，子组件里面mounted第二次不触发
小武人生
02-21 3306
最近做一个功能，弹框第一次打开可以正常，第二次就无法加载里面的内容 父子页面 子页面mounted无法加载 找了很多种方法，自己觉得代码少，并且很管用的方法 加一个 v-if，虽然功能和： visible.sync 一样，但是原理不一样 v-if控制元素的存在与否 :visible.sync控制el-dialog的显示，当我们退出弹窗时会销毁子组件的变量，实现子组件初始化，下次进入就不会携带上次输入的信息了 <el-dialog :visible.sync="detailShadow"
vue监听scroll事件无效？（踩坑记录）
Dark_programmer的博客
01-11 3031
前端使用技术为VUE 踩坑记录 最近在项目里，因为需要监听滚动事件，就直接写监听代码如下： 尝试一、 html: <div id="scroll-div" @scroll="scrollHandle"> 监听我的滚动 <div> js: scrollHandle() { console.log("scrolll"); }, 但是事件并没有执行。于是想通过addEventListener原生的方式进行监听。将代码写入mounted 尝试二、 html: moun
二次进入详情页mounted不调用问题
最新发布
weixin_52151019的博客
11-16 71
不要包在里面，然后进入详情页mounted就可以正常调用了。原因，路由那里写在children里了。
Element Dialog 按钮无效 首次有效 第一次使用后无法再次触发mounted
qq_21113235的博客
02-22 2979
问题简述： 一个复用的弹窗如下，仅首次使用有效，之后打开使用时，底部的按钮怎么点击都没有反应了 结题思路： 样式上的问题 值的问题：弹窗显示的控制值不对，表单数据没重置 按钮事件触发问题 第一步：样式上 确认按钮所在的元素，没有遮挡层级等干扰，有就提升层级 例如：z-index：10000 第二步：值的问题 检查控制弹窗的布尔值，是否正确 检查弹窗中的处理值是否正确，是否有效重置等问题 :destroy-on-close="ture" 关...
vue @click的时候，第一次点击无效，第二次才有效果
热门推荐
只是晓云闲的博客
06-13 2万+
<select type="button" v-model="typhoonYear" @click="getselectYearByDistinct" @change="getTyphoonListByYear"> <option value="">--请选择--</option> <option v-for='item in typ...
vue element-ui 打开无法获取dialog里的元素---v-if这种
菜鸡的博客
09-15 1942
Dialog 的内容是懒渲染的，即在第一次被打开之前，传入的默认 slot 不会被渲染到 DOM 上。因此，如果需要执行 DOM 操作，或通过 ref 获取相应组件，请在 open 事件回调中进行。 element.ui里的dialog有一个问题不知道该怎么解决。 例如我在dialog里写了一个表单组件，给表单组件设置了ref为form,在打开dialog的时候需要对里面的表单组件进x行this.$ref[‘form’].queryList(),来获取数据。 现在发现第一次打开dialog的时候，this
element销毁Dialog数据(简单粗暴)
UUID、
08-20 3378
在使用element开发通过之中使用Dialog弹窗创建数据或者数据回显在经常不过了。而且数据创建和数据编辑正常都是使用同一组件。 出现的问题： <el-dialog title="提示弹窗" :visible.sync="dialogVisible" width="30%" destroy-on-close> </el-dialog> 使用dialog 提供的 属性 destroy-on-close 也并不能实现实时的dialog销毁，进行创建和编辑数据正常的
elementui中el-dialog拖拽不能超出指定元素
05-31
要实现el-dialog拖拽不能超出指定元素，可以使用Vue.js的指令v-dialog-drag，结合CSS的position属性和JS的计算方法来实现： 1. 在el-dialog中添加一个指令v-dialog-drag，如下所示： ``` <el-dialog v-dialog-drag="{target:'.target-element'}"></el-dialog> ``` 其中，target属性指定了拖拽不能超出的目标元素选择器。 2. 在CSS中设置目标元素的position属性为relative或absolute，如下所示： ``` .target-element { position: relative; } ``` 3. 在Vue.js的自定义指令中，获取目标元素的位置和大小，计算el-dialog的位置，实现拖拽不能超出目标元素的效果，代码如下： ``` Vue.directive('dialogDrag', { bind(el, binding, vnode) { const dialogHeaderEl = el.querySelector('.el-dialog__header'); const dragDom = el.querySelector('.el-dialog'); const targetDom = document.querySelector(binding.value.target); const targetRect = targetDom.getBoundingClientRect(); dialogHeaderEl.style.cursor = 'move'; // 获取el-dialog的位置 const getDialogPosition = (event) => { const dragDomRect = dragDom.getBoundingClientRect(); const targetLeft = targetRect.left + window.pageXOffset; const targetTop = targetRect.top + window.pageYOffset; const maxLeft = targetLeft + targetDom.clientWidth - dragDomRect.width; const maxTop = targetTop + targetDom.clientHeight - dragDomRect.height; let left = dragDomRect.left + event.clientX - startX; let top = dragDomRect.top + event.clientY - startY; left = Math.max(targetLeft, Math.min(left, maxLeft)); top = Math.max(targetTop, Math.min(top, maxTop)); return {left, top}; } let startX = 0; let startY = 0; let dialogLeft = 0; let dialogTop = 0; let dragging = false; // 鼠标按下事件 const handleMousedown = (event) => { startX = event.clientX; startY = event.clientY; dialogLeft = parseFloat(getComputedStyle(dragDom).left); dialogTop = parseFloat(getComputedStyle(dragDom).top); dragging = true; } // 鼠标移动事件 const handleMousemove = (event) => { if (dragging) { const {left, top} = getDialogPosition(event); dragDom.style.left = `${left}px`; dragDom.style.top = `${top}px`; } } // 鼠标释放事件 const handleMouseup = () => { dragging = false; } dialogHeaderEl.addEventListener('mousedown', handleMousedown); document.addEventListener('mousemove', handleMousemove); document.addEventListener('mouseup', handleMouseup); } }); ``` 这样，el-dialog就可以在指定元素内拖拽，不能超出目标元素。

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值