弹窗中的下拉框随底部页面滚动，导致框体错位

已于 2023-06-09 09:42:54 修改
阅读量194 收藏
点赞数
文章标签： vue.js javascript 前端
于 2023-06-09 09:39:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_55862915/article/details/131120193
版权
文章讲述了在使用antd组件库的select组件时遇到的滚动错位问题，解决方案是在select组件中添加fixed属性，值设为modalbody，将选择器固定在弹窗内，防止其跟随鼠标滚动，从而解决了问题。
摘要由CSDN通过智能技术生成

扣费项目/费用的下拉框由于鼠标滚动而错位

直接看图，扣费项目/费用的下拉框由于鼠标的滚动出现了错位

直接在select组件（我用的是antd组件库，element在这能不能行也可以试下）里加入
fixed='modalbody'
别管是这些选择器的哪一个，加治百病
antd选择器
选择器跟着鼠标滚动，当时我是把选择器放在了弹窗里，只需要将选择器也定位在弹窗上，问题就解决了

早安 977
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
自适应插件autofit.js使用(这里演示vue项目)
weixin_68658847的博客
10-20 4317
自适应插件autofit.js使用(这里演示vue项目)
js判断滚动条是否已到页面最底部或顶部实例
03-16
在网页开发中，判断用户是否滚动到了页面的顶部或底部是一项常见的功能需求。这通常与实现“返回顶部”按钮的显示与隐藏有关。在本文中，我们将深入分析如何使用JavaScript来判断滚动条是否到达了页面的最顶部或最...
关于el-select下拉框在弹窗内滚动时脱离问题
Momo_dyx的博客
10-26 963
因为el-select的下拉框的z-index位置最高，所以在弹窗滚到一定位置时出现脱离、超出弹窗的问题
关于element UI 中使用下拉弹出框之类的组件容易出现弹出框会位移
LowVoice的博客
11-05 2104
在项目中发现的一个bug就是在使用element UI的下拉组件的时候，点击选项下拉后页面滚动。会出现弹框位置固定了。 然后在组件api中发现一项解决了问题。 只需要在el-select标签中加入**:popper-append-to-body=“false”**这个属性，记住前面有“：”哟。 然后发现element 其他的弹框组件也有类似的问题但是加上**:popper-append-to-body="false"这个属性没生效。 后来发现可以加入:append-to-body=“false”**这个
解决 elment-ui 大屏下全局适配 使用autofit.js时，出现的下拉错位bug.
CSN_Tom的博客
07-23 174
在vue项目中，在App.vue页面，初始化就加载autofit.js,如下配置(注：还没有安装的小伙伴，请先安装 autofit.js,安装 npm install autofit.js)涉及到el-dialog弹出框界面，有下拉空间的，可以使用它自带的属性 :append-to-body="false" 这样设置即可。autofit.js 配置(注：el 一定要写成 ‘#app’)
Element 弹窗内日期、下拉框控件 样式乱掉错位问题
qq_29050279的博客
04-23 4046
一、select多选框定位 el-select控件生成的下拉框标签默认位置是在body中，也是相对body定位的，而不是针对当前元素 可能出现这种情况： 解决方案：把popper-append-to-body属性设为false，生成下拉框到当前元素位置 <el-select v-model="value" :popper-append-to-body="false" popp...
弹窗 下拉框
11-24
6. 拖放功能：在下拉框中实现拖放选项，增加交互性。 7. 兼容性处理：确保弹窗和下拉框在不同浏览器和设备上表现一致。 通过学习和实践这些示例，开发者可以掌握创建弹窗和下拉框的基本技巧，同时了解如何优化用户...
在表格中实现复选框下拉框
01-24
在表格tableview中实现复选框，下拉框，最简单快速方案，中文读取乱码问题的解决方案。 本实例在QT5.12上运行通过，用最简单的方法在tableview中实现了复选框和下拉框，同时还提供了读取文本数据的方法以及在读取中...
完美解决iview 的select下拉框选项错位的问题
08-27
在使用iview的过程中，我们可能会遇到select下拉框选项错位的问题，当弹出框超过一屏需要滚动时，select的下拉选项会出现错位。这种问题的出现可能是由于iview组件的样式设置引起的。 在iview中，select下拉框组件...
在layui框架中select下拉框监听更改事件的例子
01-21
在select 加入红框中的代码（看不到红框的往右拖动一点） 事件监听select（这里面是上面图中红框内容 可自定义） 以上这篇在layui框架中select下拉框监听更改事件的例子就是小编分享给大家的全部内容了，希望能给...
列表中滚动鼠标Tooltip文本提示组件在列表中出现错位问题优化、elememt库的组件；
努力飞起的菜鸟
05-12 1994
vue项目中滚动鼠标，element的提示文体组件tooltip错位问题
11.动态标签页的一些优化和bug的解决
qq_55121347的博客
08-16 292
动态标签页的一些优化和bug的解决
详细介绍 Vue3 的 watch 和 watchEffect
weixin_52648900的博客
08-15 969
非常详细介绍了vue3的watch和watchEffect区别和联系
实现父组件调用子组件方法时报错：[Vue warn]: Invalid vnode type when creating vnode: null.
08-14 381
[Vue warn]: Invalid vnode type when creating vnode: null.
element table 判断当前行是否展开和只展开一行
m0_68716504的博客
08-15 452
element组件提供了table的展开和收起功能，并提供了expand-change事件用来监听table行的展开和收起在一些特殊情况下如：处理异步数据时，希望展开行时请求接口，关闭行时不用请求，但是expand-change，无论是展开还是收起都会触发，于是就希望能有一个类似isExpended布尔类型的状态属性来判断是否调用接口。
Vue 生命周期详解含demo、面试常问问题案例
qq_34419312的博客
08-16 1185
Vue 生命周期详解、面试常问问题案例 含 demo
【前端】VUE动态引入组件 通过字符串动态渲染模板 动态生成组件
最新发布
我是Superman丶的博客
08-19 101
【前端】VUE动态引入组件 通过字符串动态渲染模板。
Vue 3的Computed属性
计算机图形学
08-15 439
Vue 3的组合式API为Computed属性的使用带来了新的变化和可能性。通过computed函数，开发者可以轻松地创建只读或可写的Computed属性，并在组件中高效地处理响应式数据。合理使用Computed属性，可以使代码更加简洁、清晰和高效。
【vue3】组件通信
aaaa_aaab的博客
08-19 452
1. 概述：自定义事件常用于：**子 => 父。**2. 注意区分好：原生事件、自定义事件。● 原生事件：● 事件名是特定的（ click 、 mosueenter 等等）● 事件对象 $event : 是包含事件相关信息的对象（ pageX 、 pageY 、 target 、 keyCode ）● 自定义事件：● 事件名是任意名称● 事件对象 $event : 是调用 emit 时所提供的数据，可以是任意类型！！！--在父组件中，给子组件绑定自定义事件：-->
使用uniapp弹窗展示下拉框
02-28
在uniapp中，可以使用uni-popup组件来实现弹窗展示下拉框的效果。下面是一个简单的示例代码： ```vue <template> <view> <button @click="showPopup">点击展示下拉框</button> <uni-popup v-model="popupVisible" position="bottom"> <view class="popup-content"> <!-- 下拉框的内容 --> <view v-for="(item, index) in dropdownOptions" :key="index" @click="selectOption(item)"> {{ item }} </view> </view> </uni-popup> </view> </template> <script> export default { data() { return { popupVisible: false, // 控制弹窗显示隐藏的变量 dropdownOptions: ['选项1', '选项2', '选项3'] // 下拉框的选项数据 }; }, methods: { showPopup() { this.popupVisible = true; // 点击按钮展示弹窗 }, selectOption(option) { console.log('选择了：', option); // 处理选中选项的逻辑 this.popupVisible = false; // 关闭弹窗 } } }; </script> <style> .popup-content { padding: 10px; } </style> ``` 在上面的代码中，我们使用了uni-popup组件来实现弹窗的效果，通过设置`v-model`来控制弹窗的显示和隐藏。在弹窗的内容部分，我们使用了`v-for`指令来遍历下拉框的选项数据，并通过`@click`事件监听选项的点击事件，然后执行相应的逻辑。 你可以根据自己的需求来修改弹窗的样式和选项数据，以及处理选中选项的逻辑。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值