AntdesignVue 局部全屏后Message、Select 、Modal、Date等组件不显示问题解决方案(最终版)

news/2024/4/26 6:41:49/文章来源:https://blog.csdn.net/huichao199175/article/details/130361466

1、对this.$message.....这种的消息提示组件解决方案如下

在main.js中全局配置消息提示

//单独引用需修改的元素
import { message } from 'ant-design-vue'
message.config({maxCount: 1,getContainer:() => document.getElementById('showBigModal') || document.body //父组件元素ID 找不到时 挂载到body上
})

测试可以在父组件DIV全屏后可以弹出提示

 2、对a-select.....这种的下拉组件解决方案如下 

修改挂载节点(默认是挂载到body上)

:getPopupContainer="triggerNode => {return triggerNode.parentNode || document.body;}"

 3、对date.....这种的时间下拉组件解决方案如下 

:getCalendarContainer="(triggerNode) => triggerNode.parentNode"

 4、对Modal.....这种的弹窗组件解决方案如下 

第一种情况:a-modal在当前父组件中时

对父节点的div加上ref (能获取到dom节点)

 然后在a-modal中这样写

:getContainer = "()=>$refs.allModal"

 第二种情况:a-modal在子组件中时

用props从父组件中获取到ref

在子组件中使用 

 这样就可以局部全屏后能弹窗modal框了

5、对confirm Modal.....这种的弹窗组件解决方案如下 

获取父组件传过来的ref dom节点

props接收

全局这样配置select不生效 ????有解决的大佬麻烦告知一声哈

Select.props.getPopupContainer.default = triggerNode => {return triggerNode.parentNode || document.getElementById('fullscreen') || document.body
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_103250.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Android-实现一个登录页面(kotlin)

准备工作 首先,确保你已经安装了 Android Studio。如果还没有安装,请访问 Android Studio 官网 下载并安装。 前提条件 - 安装并配置好 Android Studio Android Studio Electric Eel | 2022.1.1 Patch 2 Build #AI-221.6008.13.2211.9619390, built …

C++(继承中)

目录: 1.基类和派生类对象赋值转换 2.派生类当中的6个默认成员函数 --------------------------------------------------------------------------------------------------------------------------- 派生类对象可以赋值给 基类的对象/基类的指针/基类的引用&am…

Java每日一练(20230425)

目录 1. 乘积最大子数组 🌟🌟 2. 插入区间 🌟🌟 3. 删除有序数组中的重复项 II 🌟🌟 🌟 每日一练刷题专栏 🌟 Golang每日一练 专栏 Python每日一练 专栏 C/C每日一练 专栏…

CSGO搬砖,每天1-2小时,23年最强副业非它莫属(内附操作流程)

自从我学会了CSGO搬运,我发现生活也有了不小的改变,多了一份收入,生活质量也就提高了一份。 其实刚接触CSGO,我压根就不相信这么能挣钱,因为在印象中,游戏供玩家娱乐竞技的,作为我这种技术渣渣…

直播系统开发中如何优化API接口的并发

概述 在直播系统中,API接口并发的优化是非常重要的,因为它可以提高系统的稳定性和性能。本文将介绍一些优化API接口并发的方法。 理解API接口并发 在直播系统中,API接口是用于处理客户端请求的关键组件。由于许多客户端同时连接到系统&…

HTTP1.1(十二)Cookie的格式与约束

一 Cookie的格式与约束 ① Cookies是什么 1) cookie是我们在前端编程中经常使用的概念2) 使用cookie利用浏览器帮助我们保存客户的相关状态信息,保存用户已经做了什么事情3) 重点和难点[1]、cookie的工作原理[2]、cookie的限制是什么[3]、session又是怎样与cookie关联起来 …

90年三本程序员,8年5跳,年薪4万变92万……

很多时候,虽然跳槽可能带来降薪的结果,但依然有很多人认为跳槽可以涨薪。近日,看到一则帖子。 发帖的楼主表示,自己8年5跳,年薪4万到92万,现在环沪上海各一套房,再干5年码农,就可以…

【Vue】学习笔记-初始化脚手架

初始化脚手架 初始化脚手架说明具体步骤脚手架文件结构 初始化脚手架 说明 Vue脚手架是vue官方提供的标准化开发工具(开发平台)最新版本是4.x文档Vue CLI 具体步骤 如果下载缓慢请配置npm淘宝镜像 npm config set registry http://registry.npm.taoba…

【移动端网页布局】流式布局案例 ② ( 实现顶部固定定位提示栏 | 布局元素百分比设置 | 列表样式设置 | 默认样式设置 )

文章目录 一、样式测量及核心要点1、样式测量2、高度设定3、列表项设置4、设置每个元素的百分比宽度5、设置图像宽度 二、核心代码编写1、HTML 标签结构2、CSS 样式3、展示效果 三、完整代码示例1、HTML 标签结构2、CSS 样式3、展示效果 一、样式测量及核心要点 1、样式测量 京…

【ChatGPT】如何让 ChatGPT 不再频繁报错,获取更加稳定的体验?

文章目录 一、问题描述二、方案1:使用 OpenAI API Key 来访问 ChatGPT三、方案2:安装 Chrome 插件3.1 介绍3.2 安装步骤3.2.1 插件 & 脚本安装3.2.2 解读功能 一、问题描述 最近一段时间,相信大家都发现了 ChatGPT 一个问题,…

Unity音量滑块沿弧形移动

一、音量滑块的移动 1、滑块在滑动的时候,其运动轨迹沿着大圆的弧边展开 2、滑块不能无限滑动,而是两端各有一个挡块,移动到挡块位置,则不能往下移动,但可以折回 3、鼠标悬停滑块时,给出音量值和操作提示 …

前端 百度地图绘制路线加上图片

使用百度官方示例的方法根据起终点经纬度查询驾车路线但是只是一个线路 <template><div class"transportInfo"><div id"mapcontainer" class"map">11</div><div class"collapse"><el-collapse v-mo…

克隆Linux系统(centos)

克隆前得保证你有一台Linux系统的虚拟机了。 如果没有&#xff0c;可以参考这篇文章&#xff1a; 安装VMware虚拟机、Linux系统&#xff08;CentOS7&#xff09;_何苏三月的博客-CSDN博客 按照示意图一步一步执行即可。 克隆前先关闭运行的虚拟机系统。 然后右键已安装的虚拟…

【图像抠图】【深度学习】Ubuntu18.04下GFM官方代码Pytorch实现

【图像抠图】【深度学习】Ubuntu18.04下GFM官方代码Pytorch实现 提示:最近开始在【图像抠图】方面进行研究,记录相关知识点,分享学习中遇到的问题已经解决的方法。 文章目录 【图像抠图】【深度学习】Ubuntu18.04下GFM官方代码Pytorch实现前言数据集说明1.AM-2k【自然动物】2.B…

Ubuntu更新软件下载更新与移除

目录 一、更新软件源 二、下载与安装软件 三、如何移除软件 四、Ubuntu商店下载软件 一、更新软件源 更新Ubuntu软件源的操作步骤&#xff0c;更新软件源的目的就是&#xff0c;将在Ubuntu官网的软件源更改到本地&#xff0c;也就是国内的软件源&#xff0c;这样的话下载安…

HTML+CSS+JS 学习笔记(三)———Javascript(下)

&#x1f331;博客主页&#xff1a;大寄一场. &#x1f331;系列专栏&#xff1a;前端 &#x1f331;往期回顾&#xff1a;HTMLCSSJS 学习笔记&#xff08;三&#xff09;———Javascript(上) &#x1f618;博客制作不易欢迎各位&#x1f44d;点赞⭐收藏➕关注 目录 JavaScrip…

ES6 新特性的let--const 解构赋值--模板字符串--对象相关新特性--箭头函数--综合代码示例

目录 ES6 新特性 ES6 基本介绍 ES6 是什么? let 声明变量 演示 let 的基本使用 注意事项和使用细节 代码演示 : const 声明常量/只读变量 应用实例 注意事项和使用细节 解构赋值 基本介绍 应用实例-数组解构 应用实例-对象解构 模板字符串 基本介绍 应用实例…

一文带你学会如何写一份糟糕透顶的简历

我们每个人几乎都会面对找工作这件事&#xff0c;而找工作或者说求职首先就是要写一份简历。今天狗哥将以一个不同的视角带你写一份无与伦比&#xff0c;糟糕透顶的求职简历&#xff0c;说实话&#xff0c;其实几年前&#xff0c;我就是这么写的。 目录 1. 文件名 2. 基本信…

OpenAI ChatGPT 能取代多少程序员的工作?导致失业吗?

阅读原文&#xff1a;https://bysocket.com/openai-chatgpt-vs-developer/ ChatGPT 能取代多少程序员的工作&#xff1f;导致我们程序员失业吗&#xff1f;这是一个很好的话题&#xff0c;我这里分享下&#xff1a; 一、ChatGPT 是什么&#xff1f;有什么作用 ChatGPT是一种…

关于 OpenShift(OKD) 网络 Service、Routes的一些笔记

写在前面 参加考试&#xff0c;分享一些学习 OpenShift 的笔记博文内容为 OpenShift 网络相关组件 Service、Routes 很浅的一些认识学习环境为 openshift v3 的版本&#xff0c;有些旧这里如果专门学习 openshift &#xff0c;建议学习 v4 版本理解不足小伙伴帮忙指正 傍晚时分…