ElementUI或AntDesign拿不到对话框内元素的 ref或者dom

2024-08-26 05:20

本文主要是介绍ElementUI或AntDesign拿不到对话框内元素的 ref或者dom,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

https://www.cnblogs.com/trampeagle/p/15146668.html

element-UI 组件 dialog 中 ref 获取不到的问题解决方案_el-dialog ref获取不到-CSDN博客

在使用Vue.js结合ElementUI或Ant Design Vue这类UI框架时,有时会遇到无法直接通过ref获取到对话框(Dialog)内元素DOM的问题。这主要是因为Vue的异步更新机制和组件的挂载(mount)时机。当对话框是条件渲染(如使用v-if)时,它可能在Vue的DOM更新周期中尚未挂载或完全渲染,因此无法立即通过ref访问其内部元素。

1.nextTick

Javascript事件循环应用—nextTick()详解_js nexttick-CSDN博客

this.$nextTick() 是 Vue.js 中的一个实例方法,它非常有用,尤其是在处理 DOM 更新和依赖 DOM 的操作时。这个方法允许你在 Vue 完成 DOM 更新后立即执行某个回调函数。这对于确保你的 DOM 查询或操作是在 Vue 的异步更新队列之后执行的非常关键。

this.$refs.myDialog.open(); // 假设这是打开对话框的方法  
this.$nextTick(() => {  // 现在对话框已经打开并渲染完成,可以安全地访问其内部元素  console.log(this.$refs.someInnerElement); // someInnerElement是对话框内元素的ref  
});

2.对话框身上方法getContainer()【Ant】

  <!--a-modal ref拿不到的解决方法--><a-modal :visible="vis" @ok="handleOk"  @cancel="handleCancel"  :getContainer="() => $refs.dialogContainer"><div class="head" style="text-align: center"><h1>{{ diaOption.name }}</h1></div><div class="infos">
<!--       <div class="info-item">设备状态:<span><img src="" alt=""></span></div>--><div class="info-item"><b>所属区域:</b><span>{{ diaOption.location }}</span></div><div class="info-item"><b> {{diaOption.currentName }}:</b> <span>{{ diaOption.currentValue }}</span></div><div class="info-item"><b>布设时间:</b><span>2024年7月1日</span></div></div>
<!--      <br>--><div class="chart-title"><b>{{ diaOption.chartTitle }}:</b></div><div id="chart" ref="chart"style="width: 440px;height: 260px; margin: 0 auto; background-color: #1e1f22"></div></a-modal>

3. 监听对话框的open事件(Element)

对于某些UI框架(如ElementUI),对话框组件可能提供了openvisible-change等事件。你可以在这些事件的回调函数中访问DOM元素。

<el-dialog @open="handleOpen" ref="myDialog">  <div ref="someInnerElement">这是对话框内的元素</div>  
</el-dialog>
-----------------------------------------------------
//javascriptmethods: {  handleOpen() {  this.$nextTick(() => {  console.log(this.$refs.someInnerElement);  });  }  
}

这篇关于ElementUI或AntDesign拿不到对话框内元素的 ref或者dom的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1107656

相关文章

遮罩,在指定元素上进行遮罩

废话不多说,直接上代码: ps:依赖 jquer.js 1.首先,定义一个 Overlay.js  代码如下: /*遮罩 Overlay js 对象*/function Overlay(options){//{targetId:'',viewHtml:'',viewWidth:'',viewHeight:''}try{this.state=false;//遮罩状态 true 激活,f

学习记录:js算法(二十八):删除排序链表中的重复元素、删除排序链表中的重复元素II

文章目录 删除排序链表中的重复元素我的思路解法一:循环解法二:递归 网上思路 删除排序链表中的重复元素 II我的思路网上思路 总结 删除排序链表中的重复元素 给定一个已排序的链表的头 head , 删除所有重复的元素,使每个元素只出现一次 。返回 已排序的链表 。 图一 图二 示例 1:(图一)输入:head = [1,1,2]输出:[1,2]示例 2:(图

JS和jQuery获取节点的兄弟,父级,子级元素

原文转自http://blog.csdn.net/duanshuyong/article/details/7562423 先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的方法作对比。 JS的方法会比JQUERY麻烦很多,主要则是因为FF浏览器,FF浏览器会把你的换行也当最DOM元素。 <div id="test"><div></div><div></div

[环境配置]ubuntu20.04安装后wifi有图标但是搜不到热点解决方法

最近刚入手一台主机,暗影精灵8plus电竞主机,安装ubuntu后wifi怎么都搜不到热点,前后重装系统6次才算解决问题。这个心酸历程只有搞技术人才明白。下面介绍我解决过程。 首先主机到手后是个windows10系统,我用无线网连接了一下,可以正常上网,说明主机有无限网卡且正常。然后我就直接开始安装Ubuntu20.04了,安装成功后发现wifi有图标但是搜不到热点,我想是不是无线网卡驱动有没有

力扣第347题 前K个高频元素

前言 记录一下刷题历程 力扣第347题 前K个高频元素 前K个高频元素 原题目: 分析 我们首先使用哈希表来统计数字出现的频率,然后我们使用一个桶排序。我们首先定义一个长度为n+1的数组,对于下图这个示例就是长度为7的数组。为什么需要一个长度为n+1的数组呢?假如说总共有三个数字都为1,那么我们需要把这个1放在数组下标为3的位置,假如说数组长度为n,对于这个例子就是长度为3,那么它的

如何保证android程序进程不到万不得已的情况下,不会被结束

最近,做一个调用系统自带相机的那么一个功能,遇到的坑,在此记录一下。 设备:红米note4 问题起因 因为自定义的相机,很难满足客户的所有需要,比如:自拍杆的支持,优化方面等等。这些方面自定义的相机都不比系统自带的好,因为有些系统都是商家定制的,难免会出现一个奇葩的问题。比如:你在这款手机上运行,无任何问题,然而你换一款手机后,问题就出现了。 比如:小米的红米系列,你启用系统自带拍照功能后

QML入门之基本元素

元素分为可视元素与非可视元素,可能元素例如Rectangle、Button等。非可视元素如Timer(定时器)、MouseArea(鼠标区域)等。非可视元素一般用于操作可视元素。 基础元素 Item Item(基础元素对象)是所有可视元素的基础对象,它们都继承自Item。可是元素存在以下共有属性。 Group(分组)Properties(属性)Geometry(几何属性)x

【CSS in Depth 2 精译_024】4.2 弹性子元素的大小

当前内容所在位置(可进入专栏查看其他译好的章节内容) 第一章 层叠、优先级与继承(已完结) 1.1 层叠1.2 继承1.3 特殊值1.4 简写属性1.5 CSS 渐进式增强技术1.6 本章小结 第二章 相对单位(已完结) 2.1 相对单位的威力2.2 em 与 rem2.3 告别像素思维2.4 视口的相对单位2.5 无单位的数值与行高2.6 自定义属性2.7 本章小结 第三章 文档流与盒模型(已

17 通过ref代替DOM用来获取元素和组件的引用

重点 ref :官网给出的解释是: ref: 用于注册对元素或子组件的引用。引用将在父组件的$refs 对象下注册。如果在普通DOM元素上使用,则引用将是该元素;如果在子组件上使用,则引用将是组件实例: <!-- vm.$refs.p will be the DOM node --><p ref="p">hello</p><!-- vm.$refs.child will be the c

react笔记 8-19 事件对象、获取dom元素、双向绑定

1、事件对象event 通过事件的event对象获取它的dom元素 run=(event)=>{event.target.style="background:yellowgreen" //event的父级为他本身event.target.getAttribute("aid") //这样便获取到了它的自定义属性aid}render() {return (<div><h2>{