a-modal 初次未显示时，无法获取到其中包裹的子组件

最新推荐文章于 2023-07-27 14:49:19 发布
最新推荐文章于 2023-07-27 14:49:19 发布
阅读量531 收藏
点赞数
原文链接：https://blog.csdn.net/Admin_yws/article/details/115235198
版权

javascript 开发语言 ecmascript

bug:主页面加载，未渲染模态框，无法通过this.$refs获取到其包裹的子组件

解决方法：forceRender=true使modal强制渲染

请添加图片描述

nash程序猴
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
antd+全屏的坑(全屏下a-modal/下拉框等不展示)
weixin_58031521的博客
10-30 1498
方案一 ：改变挂载对象。挂到根节点上：document.documentElement，再使用定位fixed目标元素，改变z-index。（全屏的还是根节点，全屏时给跟节点加class，再进行fixed)。方案二：全屏的时候给顶级元素加上一个class，写一份存在这个class下的样式去display:none需要隐藏的元素，关闭全屏时去掉这个class即可。原因：position:fixed进行相对于视口（viewport）的定位，且元素的位置在屏幕滚动时不会改变。（这个方式比较简单粗暴）
vue项目全屏状态下,ant-design中的a-model弹窗组件不显示
qq_25972233的博客
03-16 3566
最近遇到一个项目需求就是在一个组件里面进入全屏状态下,这个组件里面有一个a-model弹窗组件,不起作用的一个场景,a-model 被覆盖在浏览器全屏状态下面。
AntdesignVue 局部全屏后Message、Select 、Modal、Date等组件不显示问题解决方案（最终版）
朝花夕拾的博客
04-25 4476
1、对this.$message.....这种的消息提示组件解决方案如下1、对this.$message.....这种的消息提示组件解决方案如下在main.js中全局配置消息提示测试可以在父组件DIV全屏后可以弹出提示。
Vue3.0使用antd时，打开Modal框时无法获取里面的dom节点
CSND7997的博客
06-11 3112
问题：打开模态框之前，如果原本后台存有值需要，如何填写到编辑框里面？ 测试方法1：在打开模态框的方法里面，获取dom节点然后innerHTML，比如 showModalList() { data.fxModel = true; document.getElementById("info")?.insertAdjacentHTML("afterbegin", props.fxValue); }, 报错document.getElementById(“info”)找不
React-Native 组件之 Modal的使用详解
08-29
React-Native 组件之 Modal 的使用详解 Modal 组件是 React-Native 中一个非常重要的组件，它可以用来覆盖包含 React Native 根视图的原生视图（如 UIViewController，Activity），用它可以实现遮罩的效果。在实际...
ant-design-draggable-modal:Ant Design的Modal，可拖动
05-02
用作受控组件的更好的API。 从象限打开。 更好的转义密钥管理。 使用选项键调整大小。 :package: 安装 yarn add ant-design-draggable-modal 注意：您必须使用react@16.8.0和react-dom@16.8.0或更高版本。 :...
react-modal-video：可访问的React Modal视频组件
02-05
React模态视频React模态视频组件产品特点不受dom结构影响。 美好的过渡可用于键盘导航和屏幕阅读器。 youtube API和Vimeo API的丰富选项演示版安装npm npm install react-modal-video用法将sass文件导入您的项目@...
react-modal-hook:使用React Hooks来处理模态的语法糖
05-02
该库不提供任何UI，但是提供了一种方便的方法来呈现在其他地方定义的模式组件。 对于简单的模态组件，请查看 ，它与该库配合使用。 目录 安装 npm install --save react-modal-hook 用法 使用ModalProvider为您的...
react-native-modal-translucent：在Android上删除Modal的StatusBar背景
02-05
在Android上删除Modal的StatusBar背景 之前 后 用法 npm install react-native-modal-translucent --save # or yarn add react-native-modal-translucent 如果您的RN版本低于0.60，则需要手动链接。 react-native ...
网页全屏，modal 弹框无法显示的问题
AsuraSylar的博客
07-12 4118
问题描述页面主体部分全屏后，页面中的所有弹窗不能显示，退出全屏后，弹窗正常。解决方法校园项目中，所有用到的弹窗为iview的弹窗组件，该弹窗组件会生成在body中，和项目主体app为平行关系，项目主体全屏后，层级最高，弹出会被盖在app层级下面，不能显示。解决方法--调用document.documentElement // 全屏 requestFullscreen = (eleme...
antd Modal中添加Form表单，数据回填时通过ref方式第一次打开页面时current是null 的解决方式
前端菜鸡的博客
10-30 5876
解决方案： 给Modal加一个强制渲染属性 forceRender={true} 踩坑+1
基于Antd的模态框modal不显示 确认和取消按钮
cat_want_fly的博客
08-10 5860
基于Antd的模态框modal不显示 确认和取消按钮
【AntDesign】Modal对话框内子组件重复渲染的问题
最新发布
每天进步一点点, 靠近小目标一点点~
07-27 471
Modal关闭时未对子元素进行销毁, Modal增加destroyOnClose={true}
react antd-design Modal里加form表单，用ref回显数据，第一次打开取到的是null
qq_39352780的博客
11-30 5675
开始 react项目里，使用ui框架ant-design。table列表的每一行都有编辑按钮，点击编辑，弹窗Modal出现，里面使用Form表单，然后用ref回显数据。但是发现第一次点编辑打开弹窗，ref取到的current总是null，关闭再次打开就可以正常取到。 解决方法 Modal里有一个属性为强制渲染 给Modal加上此属性即可。 forceRender = {true} 上全部代码： import React, { Component } from 'react'; import { Fo
react antd Modal里Form设置值不起作用
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
05-31 1889
react antd Modal里Form设置值不起作用
解决：this.$refs引用子组件报错 is not a function
热门推荐
草巾冒小子的博客
11-13 2万+
解决this.$refs引用子组件出现undefined或者is not a function的错误。
vue源码分析-组件
yyzzabc123的博客
10-17 245
我们知道，组件是Vue体系的核心，熟练使用组件是掌握Vue进行开发的基础。上一节中，我们深入了解了Vue组件注册到使用渲染的完整流程。这一节我们会在上一节的基础上介绍组件的两个高级用法：异步组件和函数式组件。
动态组件 --出错
君兮的博客
08-19 358
报错之后查了很多，都发现看不懂 后来对比才发现，错把内容作为is属性的属性值了 一直把hello-one作为type的值 理清思路 动态组件就是通过is属性绑定不同的子组件名来实现动态切换不同的子组件 所以is绑定的应该是子组件的名字，切换的也应该是子组件的名字 因为切换的都是子组件，所以用component标签包括起来 这是正确代码 <div id="vm"> <component :is="type"></component> <button @click.
vue封装a-modal组件，保留默认事件
06-01
你可以在封装a-modal组件时，在模板中使用v-on="$listeners"来将父组件传递的事件绑定到子组件上。同时，在子组件的props中添加modalOptions对象，可以保留默认事件。 示例代码如下： ```html <template> <a-modal v-bind="modalOptions" v-on="$listeners"> <!-- 插槽内容 --> </a-modal> </template> <script> import AModal from 'a-modal'; export default { components: { AModal }, props: { modalOptions: { type: Object, default: () => ({}) } } }; </script> ``` 在父组件中，可以通过v-bind:modal-options来传递modalOptions对象，例如： ```html <template> <div> <button @click="showModal">打开模态框</button> <my-modal :modal-options="modalOptions" @ok="handleOk" @cancel="handleCancel"> <p>这是模态框的内容</p> </my-modal> </div> </template> <script> import MyModal from './MyModal'; export default { components: { MyModal }, data() { return { modalOptions: { title: '提示', width: '400px' } }; }, methods: { showModal() { // 打开模态框的代码 }, handleOk() { // 确定按钮的回调函数 }, handleCancel() { // 取消按钮的回调函数 } } }; </script> ``` 在子组件中，modalOptions对象可以在a-modal组件的props中定义，例如： ```html <template> <a-modal v-bind="modalOptions" v-on="$listeners"> <slot></slot> </a-modal> </template> <script> import AModal from 'a-modal'; export default { components: { AModal }, props: { modalOptions: { type: Object, default: () => ({ title: '提示', width: '400px' }) } } }; </script> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值