使用ahooks的useFullscreen全屏后select下拉框丢失的问题

最新推荐文章于 2024-03-20 15:27:52 发布
最新推荐文章于 2024-03-20 15:27:52 发布
阅读量802 收藏
点赞数
文章标签： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37185155/article/details/121386794
版权

项目场景：

项目中使用ahooks的useFullscreen全屏化的时候碰到bug, 整了一天,终于定位到原因是使用了Antd中的Select造成的,甚至一度想使用原生select标签,然而因为麻烦以及懒得大规模重写代码被劝退了 - -

解决方案：

具体解决方案是Select里面有一个getPopupContaine在这里插入图片描述
只要在Select标签上添加getPopupContainer={triggerNode => triggerNode.parentNode}即可解决该问题, 应该是Select下拉框dom是挂载在body的某个地方上的,全屏后导致挂载的节点混乱的问题,也欢迎大佬深究讲解下,实在太恶心了

**

qq_37185155
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue requestFullscreen全屏导致Element下拉框无法展示
u010994219的专栏
11-03 3418
问题如题。 解决方案：我们可以通过document.documentElement元素调用requestFullscreen，之后在需要全屏的元素使用fixed布局，调整层级可以全屏。
vue-fullscreen全屏下elementui 日期下拉框 不出来，非全屏，下拉框可以出来，全屏下拉框不出来（发版）
qq_32758159的博客
11-04 4111
vue-fullscreen全屏下elementui 日期下拉框 不出来 问题：非全屏，下拉框可以出来，全屏下拉框不出来 1.解决思路：上网查后，下拉框不要放入body中可以解决，搜一个属性，让下拉框不放入body https://blog.csdn.net/qq_42907330/article/details/109290894?utm_medium=distribute.pc_relevant.none-task-blog-2defaultbaidujs_title~default-0.essearc
vue使用screenfull全屏指定容器，页码、日期等下拉框不显示的问题解决
m0_66039084的博客
12-08 1955
vue使用screenfull插件全屏指定容器，页码、日期等下拉框不显示的问题解决
a-select全屏不加载
AAA123753的博客
05-22 164
因为a-select的下拉容器使用的是绝对定位，而且全屏后存在沉积问题不显示，所以只需要在a-select上加一句代码。解决a-select在使用全屏插件后，下拉子元素无法显示问题。
【Ant Design Vue】全屏时a-select下拉框选项消失
phhz的博客
03-09 762
【代码】【Ant Design Vue】全屏时a-select下拉框选项消失。
完美解决iview 的select下拉框选项错位的问题
08-27
在使用iview的过程中，我们可能会遇到select下拉框选项错位的问题，当弹出框超过一屏需要滚动时，select的下拉选项会出现错位。这种问题的出现可能是由于iview组件的样式设置引起的。 在iview中，select下拉框组件...
浅谈Vue Element中Select下拉框选取值的问题
08-27
在这篇文章中，我们提供了一个实际的解决方案，使用 Vue Element 中 Select 下拉框来解决这些问题。 在 Vue Element 中，Select 下拉框是一个非常有用的组件，可以帮助我们快速地选择某个选项。但是，在实际开发中...
解决element ui select下拉框不回显数据问题的解决
10-17
然而，在实际使用过程中，有时会遇到`el-select`无法正确回显已选择数据的问题。本篇文章将深入探讨这个问题，并提供解决方案。 问题描述： 当使用`el-select`组件绑定数据模型（`v-model`）时，下拉框在编辑表单时...
JS Select下拉框(支持输入模糊查询)
10-20
本文将介绍如何使用JavaScript创建一个支持输入模糊查询的Select下拉框。 首先，我们要在HTML中设置基本的结构，包括一个输入框(input)用于用户输入查询内容，一个隐藏的文本框(hidden)用于存储选定的值，以及一个...
非常实用的ahooks，动态表单、防抖、节流等等
dongakng的博客
09-23 2968
非常实用的ahooks，动态表单、防抖、节流等等
react-fullscreen:适用于React的全屏助手组件
05-15
全屏React 一个React组件，它使用Fullscreen API将其子级设置为全屏，并使用对其进行了规范化。 用法 * 安装。 yarn add react-full-screen *导入组件和挂钩 import { FullScreen , useFullScreenHandle } from "react-full-screen" ; *设置和渲染。 每个全屏元素必须使用一个手柄。 import React , { useCallback } from 'react' ; import { FullScreen , useFullScreenHandle } from "react-full-screen" ; function App ( ) { const handle = useFullScreenHandle ( ) ; return ( < d
4.vueuse-useFullscreen优雅的使用全屏及退出全屏
weixin_42386379的博客
05-10 2437
vueuse-useFullscreen的使用
130+Hooks,解锁react hooks使用 的正确姿势
qq_39398332的博客
10-17 3596
为什么会有 Hook 介绍Hooks之前，首先要给大家说一下React的组件创建方式，一种是类组件，一种是纯函数组件，并且React团队希望，组件不要变成复杂的容器，最好只是数据流的管道。开发者根据需要，组合管道即可。也就是说组件的最佳写法应该是函数，而不是类。。 但是我们知道，在以往开发中类组件和纯函数组件的区别是很大的，纯函数组件有着类组件不具备的多种特点，简单列举几条 纯函数组件没有状态 纯函数组件没有生命周期 纯函数组件没有this 只能是纯函数 这就注定，我们所推崇的函数组件，只能做UI展
AntdesignVue 全屏后下拉框和时间框不显示问题解决
朝花夕拾的博客
04-24 558
【代码】AntdesignVue 全屏后下拉框和时间框不显示问题解决。
vue页面或者网页全屏后，modal 弹框或者下拉框无法显示
hbmern的博客
12-01 5812
版权声明：本文为CSDN博主「时光荏苒、、、、、、、、」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csdn.net/woyaojinali/article/details/110958317 说明：遇到了这个问题，仅为了记录~ 原因： 页面主体部分全屏后，页面中的所有弹窗和下拉框不能显示，退出全屏后，弹窗正常。原因：**项目主体全屏后，层级最高，弹出会被盖在app层级下面，不管怎么设置z-index都无济于...
VueUse中文文档Vue官方工具库
热门推荐
m0_67266042的博客
03-06 2万+
VueUse官网地址https://vueuse.org/ 这里就列举常用工具详情请去官网 查看所有API 浏览器 useFullscreen全屏展示 //isFullscreen 当前是否是全屏 //toggle 是函数直接调用即可 const { isFullscreen, toggle } = useFullscreen(); useClipboard粘贴功能 //text 粘贴的内容 //copy 是粘贴函数 const { text, copy, isSupported } = useCli
全屏
朝阳39的博客
10-13 390
HTML5规范允许用户自定义网页上任一元素全屏显示。 开启/关闭全屏显示 方法如下：（注意 screen 是小写） requestFullscreen() //让元素开启全屏显示 cancleFullscreen() //让元素关闭全屏显示 为考虑兼容性问题，不同的浏览器需要在此基础之上，添加私有前缀，比如：（注意 screen 是大写） webkitRe...
全屏解决方案 (screenfull or vueuse)
最新发布
i_Satan的博客
03-20 720
在 elementui 组件外面包一层 div,并给该 div 添加 ref=“screenFull”(默认是 6.0,vue2 环境下会报错,所以需要安装 5.1.0)如何想让 elementui 组件使用全屏功能,可能会报上述错误.
ahook中常用的一些hooks
ToShy的博客
03-07 7004
ahooks中一些常用的hooks
select下拉框打开后在弹窗层级下
06-07
您好，我理解您的问题是关于select下拉框在弹窗层级下的展示问题。如果您想要让select下拉框在弹窗层级下展示，可以考虑使用CSS的z-index属性来控制层级关系。具体做法是，将弹窗的z-index值设置为比select下拉框的z...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值