zoom缩放后导致element-ui下拉框位置偏移的解决

最新推荐文章于 2024-07-01 10:25:53 发布
最新推荐文章于 2024-07-01 10:25:53 发布
阅读量4.9k 收藏 4
点赞数 1
文章标签： 前端 javascript html elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_47132924/article/details/126722918
版权

1.使用element自带的popper-append-to-body，:popper-append-to-body=false,可以解决单个seleted的偏移问题

2.如果想要一次性解决所有的偏移，在全局样式表设置样式，使缩放比例保持一致就行

如下图

 在这我全局设置缩放到0.8，为了保持一致，我将下拉框和时间选择器一起缩放到0.8，就可以一次性解决下拉框和时间选择器的偏移问题

m0_47132924
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
elementui时间选择器定位跑偏到左上角
jun的博客
03-26 1520
1.以为是年份时间段选择；有开始年份和结束年份；开始选择器定位正常，结束年份选择器定位跑偏左上角，加key定位正确。 直接加个key="xxx"就可以了 <wt-search-form-item v-if="form.formData.method === '2'" > <!-- 年份选择 自定义slot --> <el-date-picker v-mode
设置zoom后，导致级联下拉不跟随输入框
lyn1772671980的博客
10-10 1174
【解决方法】对各自元素的样式，也设置zoom:0.75，即可解决错位问题。
zoom缩放页面导致element ui中的弹出框定位不准
山有木兮木有枝 心悦君兮君不知
01-14 5673
@media screen and (max-width: 1366px) { .page-tt-wrapper { zoom: 0.85; } } 注意：使用了zoom之后，element中的弹出框可能会定位不准，这时需要用到popper-append-to-body <el-form-item label="类型："> <el-selec...
浏览器放大缩小后el-select 和el-date-picker的位置错位解决
Judith_p的博客
06-26 193
解决办法：element的特有属性，select加:popper-append-to-body="false" date-picker加:append-to-body="false"
【elementplus】body使用zoom导致el-dropdown组件的下拉菜单错位的解决方案
bbt953的博客
07-12 2360
body使用zoom导致el-dropdown组件的下拉菜单错位的解决方案
zoom缩放问题(关于ElementPlus、Echarts、Vue3draggable等组件偏移问题)
最新发布
m0_56164131的博客
07-01 431
做了一个项目下来，由于整体界面偏大，采取了缩放90%，导致很多组件出现偏移问题，以下我会把我遇到的各种组件偏移问题依次进行描述解答
页面缩放后，对于Element UI 下拉框和级联选择器位置错乱问题
dongakng的博客
03-22 669
【代码】页面缩放后，对于Element UI 下拉框和级联选择器位置错乱问题。
解决因设置zoom引起的下拉框偏移
qq_42489794的博客
05-30 1103
在这里我有两种方法解决，如有有其他的方法欢迎补充。1、在下拉框样式补充zoom。
Vue + Element-ui的下拉框el-select获取额外参数详解
10-14
在Vue.js框架中，Element-ui库提供了一套丰富的UI组件，其中包括用于创建下拉框的`el-select`组件。在实际开发中，我们可能需要在用户改变选择时获取额外的信息，比如当前行的数据或者自定义的属性。本文将详细介绍...
在element-ui的select下拉框加上滚动加载
10-17
Element-UI的`<el-select>`组件提供了一个方便的方式来选择数据，但默认情况下，当数据量过大时，一次性加载所有选项可能会导致页面性能下降。为了解决这个问题，我们可以实现一个滚动加载功能，即在用户滚动到...
element-ui中dialog弹窗关闭按钮失效的解决
10-14
主要介绍了element-ui中dialog弹窗关闭按钮失效的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Zoom缩放后el-dropdown下拉菜单位置偏移问题
路人甲的博客
03-29 2921
element的el-dropdown组件存在下拉时会产生偏移的问题解决
关于element下拉框随着网页的缩小发生错位
weixin_37601321的博客
06-19 983
关于element下拉框随着网页的缩小发生错位
element中关于下拉时位置偏移
nick_zhang的博客
09-13 9168
最近做项目时发现element的好多组件在存在下拉时会产生偏移，例如select，dropdown，datepicker，究其原因主要是发现页面存在滚动条时，会出现偏移的情况。结合源码popper.js，当屏幕变化或者滚动时，会动态计算元素的定位位置信息，实时改变。 <el-select :popper-append-to-body="false" popper-class="popper-select"> <el-option>南京</el-option> <
解决鼠标滚动时element-ui下拉框错位的问题
锦瑟年华L的博客
05-22 483
解决鼠标滚动时element-ui下拉框错位的问题
【elementplus】body设置zoom后，el-table开启show-overflow-tooltip后，表格的tooltip显示会错位的解决方案
bbt953的博客
07-03 2122
示例：明明划过的是第一行，tooltip却显示到了第四行的位置；代码：使用transform属性来修复el-table组件的位置。正确显示：划过第一行，tooltip显示在第一行的位置。
【elementUI】el-select选择框位置错位、偏移bug
小安驾到的博客
02-16 5674
在el-select组件中，可能会由于option选项过多而导致下拉框位置错乱、偏移的情况，我个人试验大概是在5-6个option以上时，该bug就会出现。
Vue中ElementUI结合transform使用时，发现弹框定位不准确问题
觉醒法师的专栏
08-23 2928
查看element-ui官方文档无果后，打算更换新的框架进行开发，但更换几个后发现都存在类似问题，由于之前项目都是使用element-ui，对此框架比较熟悉，所以还是决定在此基础解决问题。在近期开发中，需要将1920*1080放到更大像素大屏上展示，所以需要使用到transform来对页面进行缩放，但是此时发现弹框定位出错问题，无法准备定位到实际位置。如果屏幕像素更大，则偏移位置更远，对此element-ui文档中常规手段已无法解决，只能从底层考虑。
浏览器缩放造成的网页错位问题
热门推荐
◇″淡定。
11-04 1万+
1.li标签的内容自动换行
封装element-ui下拉框组件
04-29
好的，下面是封装element-ui下拉框组件的步骤： 1. 创建一个基于element-ui下拉框组件的自定义下拉框组件。 2. 在组件中设置props参数，用于接收下拉框的数据源。 3. 使用el-select组件，通过v-for指令对下拉框的选项进行循环遍历，并将每一项的value和label值与props参数进行绑定。 4. 设置组件的v-model属性，用于双向绑定选中的下拉框项的值。 5. 为组件设置事件监听器，通过emit()方法向父组件传递选中的下拉框项的值。 以上就是封装element-ui下拉框组件的基本步骤，希望能对你有所帮助。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值