vue模态框组件拿不到dom元素

今天在写模态框的组件时，在一个页面引入了模态框组件。但是模态框设置初始是不显示的，然后我在模态框组件里面的mouted里面拿到dom元素，按理来说mouted都已经加载完元素了，但是我不管是通过document.getElementById还是ref拿值都是拿取不到，甚至还用了this.$nextTick ,都拿取不到dom元素。最后自己反应过来了，加载一个页面的时候会把模态框组件一起加载进来，但是我的模态框初始是不显示的，我是通过模态框自带的属性visible控制的，相当于是v-if隐藏了模态框，模态框组件虽然被引入了。但是模态框里面的dom被v-if隐藏了。所以无论如何我都拿取不到dom元素。这简直就是个大坑。后面我把拿取dom元素的事件改成了在我点击模态框按钮的时候传个值，然后在监听这个值的事件里去写拿取dom元素，就完全ok了。简单点讲就是我要在模态框显示的时候才能拿到模态框里面的dom元素，并且还要配合this.$nextTick使用，否则还是拿取不到dom元素，因为监听事件跑的比加载dom元素更快。

动动你的小手点个赞就是对我最大的支持！！！

vue模态框组件拿不到dom元素相关推荐

用vue实现模态框组件
基本上每个项目都需要用到模态框组件,由于在最近的项目中,alert组件和confirm是两套完全不一样的设计,所以我将他们分成了两个组件,本文主要讨论的是confirm组件的实现. 组件结构 < ...
如何用vue实现模态框组件
基本上每个项目都需要用到模态框组件,由于在最近的项目中,alert组件和confirm是两套完全不一样的设计,所以我将他们分成了两个组件,本文主要讨论的是confirm组件的实现. 组件结构 < ...
vue鼠标点击指定区域创建dom元素与编辑删除元素的思路
vue鼠标点击指定区域创建dom元素与编辑删除元素的思路话不多说有思路直接干一. 鼠标点击页面灰色背景创建红色元素二. 点击已经创建的红色元素则是编辑或者删除根据点击元素的类名来判断是属于创建 ...
详细介绍React模态框组件react-modal
1,介绍该组件实现了模态框的一些效果. 这是react-modal官网的配置参数. 模态框的手动实现,并不算太难,这个组件用着还不错. 2,配置参数介绍 import React, { Compon ...
vue 穿梭框组件
前言:由于项目需要,element ui 里面的穿梭框不满足需求,所以自己封装了一个穿梭框,此穿梭框为三个,可以两两穿梭. 如下图: 代码如下:如有bug ,欢迎指出: 其实数据的传输,最好用vuex ...
Vue笔记（五）—— Vue render渲染/组件嵌套之iView官网案例改写Table表格组件及Modal弹窗/对话框/模态框组件内容自定义详解
缺乏耐心的读者请主要关注标红部分! 因部分内容自动转为代码格式,所以代码部分请主要关注注释部分! 1.Table表格组件内容自定义: 官网Table表格组件部分示例代码: columns12: [{t ...
modal组件 vue_vue 自定义modal 模态框组件
参数名类型说明 visible Boolean 是否显示,默认false title String 标题 update:visible Boolean 更新visible, 使用:visible. ...
Taro+react开发（22）--模态框组件
<AtModalisOpened={isOpend}title="标题"cancelText="取消"confirmText="确认" ...
vue中使用$refs获取不到DOM元素
this.$refs.xx 为 undefined 的几种情况: 1. 在created 钩子函数中调用: create()在实例创建完成后被立即调用.这时,实例已完成数据观测.属性和方法的元素,wa ...

vue模态框组件拿不到dom元素

动动你的小手点个赞就是对我最大的支持！！！

vue模态框组件拿不到dom元素相关推荐

最新文章

热门文章