el-dialog获取DOM为null

已于 2023-11-07 15:00:04 修改
阅读量396 收藏
点赞数
文章标签： vue elementui
于 2021-03-05 14:56:32 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yuxinSir/article/details/114396914
版权
本文探讨了在使用el-dialog组件时首次打开DOM为null的问题。建议将初始值设为true并在created钩子中修改为false。为了在mounted钩子中获取DOM元素，还需要使用$nextTick。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

el-dialog第一次打开时，获取dom为null，可将初始值设为true，在created中修改为false。如果想在mounted中获取dom，还需要增加$nextTick

el-dialog弹框全局增加可拖拽指令
swagLi的博客
06-25 386
elementUI的el-dialog弹框增加任意拖拽功能
el-dialog 进行拖拽和更改弹框大小
qq_44678911的博客
03-10 4689
在使用el-dialog 可以使用自定义指令来进行修改当前窗口的位置和大小 首先在utils文件下创建dialog.js dialog.js import Vue from 'vue' /* * 定义公共js里，在入口文件main.js中import； * 给elementUI的dialog上加上 v-dialogDrag 指令就可以实现弹窗的全屏和拉伸了。 */ // v-dialogDrag: 弹窗拖拽+水平方向伸缩 Vue.directive('dialogDrag', {
获取element-ui的dialog中元素为null的问题
松烟入墨
01-24 2281
在打开弹窗的时候操作DOM，发现获取DOM为null 问题 如上图所示，在打开弹窗的时候，需要给按钮添加监听事件，上传文件 代码如下 getFileMD5() { const el = document.getElementById("upload-file"); const bmf = new BMF(); el.addEventListener( ...
vue mouted 获取dom元素显示null
m0_50981596的博客
07-18 1218
vue mouted 获取dom元素显示null
vue 使用 el-dialog 获取元素为null的解决方法
qq_36926583的博客
07-30 2774
<el-dialog :title="(qrcodeTitle = '支付二维码')" :visible.sync="qrcodeVisible" v-if="qrcodeVisible" :before-close="closeBox" > <div slot="footer"> <div id="qrcode" style="width:200px;height:200px;margin:0 auto"></div> .
[Vue warn]: Error in created hook: "TypeError: dom is null"
信徒博客
09-21 4937
报错信息如下 错误原因 就是dom（一些html标签）还没有渲染，导致dom是null的 mouted是html渲染以后的方法，只能说你的图表节点如echarts还没有渲染就调用了mouted里面的方法了； ...
html dom对象is null,html - javascript append to DOM before DOM is constructed (head and body are null)...
weixin_39816946的博客
06-29 96
Goal: hide youtube recommendationsImplementation: inject to hide some css classesvar styleEl = document.createElement('style')styleEl.textContent = `ytd-rich-grid-renderer,ytd-watch-next-secondary-re...
el-dialog弹窗的拖拽和全屏——封装全局自定义指令
zhufengnian6的博客
06-07 875
【代码】el-dialog弹窗的拖拽和全屏——封装全局自定义指令。
el-dialog-----弹出层拖拽、双击全屏
weixin_45102212的博客
04-26 771
弹出框要求添加拖拽和双击头部全屏 1、创建js import Vue from 'vue' // v-dialogDrag: 弹窗拖拽属性 （重点！！！ 给模态框添加这个属性模态框就能拖拽了） Vue.directive('dialogDrag', { //属性名称dialogDrag，前面加v- 使用 bind(el, binding, vnode, oldVnode) { //弹框可拉伸最小宽高 let minWidth = 400 let minHeight = 3
html dom对象is null,HTML DOM previousSibling 属性
weixin_30313409的博客
06-29 346
HTML DOM previousSibling 属性previousSibling只读属性在同一树级别返回指定节点的前一个节点。如果没有先前的同级，则此属性返回null。空格被视为文本，文本被视为节点。注释也被视为节点。为了避免previousSibling返回#text或#comment节点的问题，可以使用previousElementSibling仅返回元素节点。使用nextSibling属...
TypeError document.getElementById(...) is null错误原因
09-03
主要介绍了TypeError document.getElementById(...) is null错误原因,这是很容易犯的一个低级错误,需要的朋友可以参考下
Dom元素加载，el-dialog中嵌套el-tab，获取不到dom元素，Echart图表获取不到Dom元素问题
evennight的博客
07-24 838
echart图需要初始化挂在在dom中，如果没有dialog弹出层的话，可以直接写在mounted中通过this.$refs.name获取或者document.getElement的各种方法获取，但是一旦和dialog挂钩，name如果常规写在mounted的时候，就会报错，取不到对应元素，方式二：标签绑定方法@opened = "opendDialog”然后在方法中获取对应的的dom元素。这两种原理都是一样的都是在弹出层加载完成后在获取值。因此需要在加载完成弹出层后在取dom的值。
在el-dialog中无法正确获取DOM的问题
Naaaano的博客
01-06 2192
今天工作中有个需求是，在一个弹出框里放Echarts图表。众所周知Vue里是在mounted生命周期里才能获取到DOM，于是我理所应当的： mounted() { let diameter= document.getElementById("diameter"); let diameterOption = {...}; echarts.init(diameter).setOption(diameterOption); } 报错，找不到DOM，无法生成echarts。但mounted里不应该发生这种情
vue3使用ref获取dom结果为‘null’
m0_56683897的博客
03-22 9020
这就是生命周期的问题了，setup本质上相当于vue2中的created，在创建阶段，dom元素还未完全创建完成，此时获取dom自然为null了。如果你使用了setup语法糖，那么你在使用时可能会出现ref.value取不到子组件里的值，或者报错ref.value对象为空的情况，那是因为在语法糖中获取到的是一个proxy值。setup的return中应该抛出ref封装的字段，否则ref的值只是定义了并不能响应式使用，事实上，所有ref或者reactive定义的值都应在return中抛出。
uniapp + vue3.2 用ref获取DOM元素一直为null
weixin_43552533的博客
06-06 3853
uniapp + vue3.2 开发小程序 用ref获取DOM元素一直为null。有人遇到同款问题并已解决的看到捞一下我…
el-dialog关闭后重置表单和校验提示
老徐的博客只有干货
10-19 3040
问题说明 最近测试反馈操作某新增/修改表单，点击【取消】或【关闭】窗口后再次点击【新增】或【修改】发现校验提示仍然存在！ 问题原因 项目采用Vue+ElementUI，修改表单的窗口控件采用el-dialog中添加el-form实现，默认在关闭和取消操作是没有绑定任何事件的，所以不会去清除原有的validate校验提示信息。 解决方案 1、在el-dialog元素上绑定一个@close事件，指向一个自定义函数，例如此处叫做：reset(formName)意思就是点击关闭按钮重置表单，同时清空校验信息。例如
el-dialog子组件在mounted周期内获取不到dom？
MISS_zhang_0110的博客
03-08 1517
正常父子组件在mounted生命周期内可以获得dom父created—子created—子mounted—父mounted----子updated—父updated。
el-dialog校验残留 重置校验失败 resetFileds失效的斗争
小菜鸡程序媛的挣扎史
01-09 1470
问题现象： 使用el-dialog作为子组件的时候，新增和编辑是同一个弹窗， 先打开编辑，取消，再打开新增弹窗会弹出校验。 先打开编辑 再打开 且关闭前会短暂显示之前编辑框的内容 问题分析： 首先 this.$refs.Form.resetFileds 是清空校验并重置为初值。 因为el-dialog是用 visible.sync 绑定的， 只是控制显示和隐藏，并...
获取el-dialog放大缩小的高度
最新发布
03-25
### 实现 el-dialog 自动调整高度或支持手动缩放 为了使 `el-dialog` 组件能够根据内容自动调整高度或者支持手动缩放功能，可以采用以下方法： #### 方法一：通过 CSS 和 JavaScript 动态设置高度 可以通过监听...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

PinkSir

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值