vue中使用Element组件el-dialog导致页面偏移——解决方法

最新推荐文章于 2024-03-14 14:42:01 发布
最新推荐文章于 2024-03-14 14:42:01 发布
阅读量6.8k 收藏 15
点赞数 13
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44066534/article/details/108414411
版权

在vue项目中里使用Element的el-dialog组件

问题1：原先的页面有滚动条，再引入弹出框之后又出现滚动条

在这里插入图片描述

解决方法：找到弹出框对应的class再将overflow设置为hidden

在这里插入图片描述

问题2：组件引起原页面偏移

修改完之后滚动条没了但是滚动条的位置还在，这导致了弹框出现的时候原来的页面会向左边偏移，引起页面的抖动

在这里插入图片描述
一番检查后发现问题所在：弹框出现的时候body上会被动态的添加上一个class和style

例如：点击弹框前的body

在这里插入图片描述
点击弹框之后

在这里插入图片描述
一开始一直把关注点放在组件上，甚至怀疑是el-dialog的modal-append-to-body属性对body的样式进行了修改…（事实证明是我想多了，献上官方对modal-append-to-body属性的解释👇）

在这里插入图片描述

言归正转，发现了页面偏移是因为body上被添加了padding-right:17px的style属性那就好解决多了。

解决方法：在入口文件App.vue中设置body的css样式
在这里插入图片描述
含泪提醒😭：习惯将style样式设置为scoped的小伙伴一定要记得去掉scoped，否则该body样式是不会起作用的…（此处的css用的是stylus语法的格式）

GaHin_
关注
【elementUI系列四】el-selec位置偏移解决思路
qq_37485170的博客
11-22 1202
在开发过程中，el-select位置随着滚动条的出现，未退出focus状态下窗口出现如下情况，下拉框已经超出屏幕显示区域，下拉内容还在屏幕中，如图：​一、解决方案翻阅官方文档，发现el-select的属性popper-append-to-body默认是将弹出框插入至 body 元素。在弹出框的定位出现问题时，可将该属性设置为 false考虑到功能的通用性和可复用性，最终决定选择使用自定义指令directives来实现，根据类名获取到所有下拉框，监听页面滚动后，改变下拉框样式，关闭显示下拉选项。
用Vue仿element-ui从0到1封装可复用的组件-dialog
bob的博客
07-17 614
用Vue仿element-ui从0到1封装可复用的组件-dialog 1.需要的前置知识 vue基础语法,组件通讯(sync,provide,inject)，slot，v-model，computed和watch 过渡动画 1.1准备工作，引入全局 import vbDialog from "@/components/Dialog"; Vue.component(vbDialog.name, vbDialog); 父组件：App.vue 子组件：Dialog.vue 2.实现目标 点击click按钮
vue中el-dialog弹窗出现时页面整体左移
m0_73857425的博客
04-23 1040
【代码】vue中el-dialog弹窗出现时页面整体左移。
el-dialog 打开弹窗 发生偏移
L221545的博客
06-17 1428
解决el-dialog 弹窗发生偏移
elementui Dialog对话框,显示偏移问题
u010914880的博客
11-13 7170
#当显示dialog的时候页面会有padding-right:15的偏移这时候可以在页面设置一个样式 body{padding-right:0px!important}覆盖就行了
el-dialog拖拽实现及拖拽过程部分区域无法拖拽，全屏情况位置不对的问题及解决方法（通用版本）
weixin_44295184的博客
10-10 2002
el-dialog拖拽实现及拖拽过程部分区域无法拖拽，全屏情况位置不对的问题及解决方法（通用版本）
解决el-dialog弹出时，页面抖动，右侧会缩小的问题(即滚动条被遮罩层覆盖的问题)
m0_45272038的博客
08-03 2274
后来我找了一下页面具体样式变化，发现弹框在出现时，会对页面的滚动条进行处理，给body增加额外的样式类；更直接的办法参考 方法2，直接不让遮罩层罩盖滚动条，滚动条正常展示，但是这样的话即使有遮罩层用户也能正常拉动滚动条；在弹出el-dialog时，会发现弹出框弹出时，页面会抖动，滚动条被遮罩层覆盖直接没有滚动条了，导致页面缩小了几个像素点（滚动条的宽度）；体验感不好，会影响到页面的布局，且页面有的fixed定位的内容也会随着遮罩层的出现移动几个像素点；
解决el-dialog弹窗打开时页面往左抖动问题
最新发布
Cabriella_的博客
03-14 289
App.vue中添加如下样式。
el-dialog 对话框显示怎么往上调一调 或者往下调调显示
老段的CSDN的博客
10-10 2846
*白话说就是可以对话框位置能往上显示或者往下显示。
elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo
12-09
调试了好久, 还能凑合用, 请直接看DOME ...link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <style media="screen" type="text/css"> #appLoading { width: 100%;
根据element+vue 自定义dialog+drawer组件 弹窗+抽屉 无覆盖 + 可拖拽.7z
12-09
在Element UI中，Dialog和Drawer已经具备了基础的使用方式，但为了满足特定需求，如无覆盖效果和可拖拽功能，开发者需要对这些组件进行定制。 无覆盖效果意味着对话框或抽屉不会完全遮挡页面背景，可能需要调整Z-...
tinymce移动端使用_一招解决Tinymce在el-dialog中下拉框使用异常
weixin_39791653的博客
11-21 2645
前言：在项目开发维护过程中，由于需要富文本编辑器，经过对比wangEidtor、quill等多个富文本编辑器，发现TinyMce富文本编辑器是最合适的，使用体验也是最好的；而且支持移动端的使用，支持响应式布局。所以我在EuiAdmin开源项目中集成了Tinymce富文本编辑器。经过基本的配置，满足基础使用、且支持axios上传图片。但是还是存在一个问题，那就是当Tinymce富文本编辑器在elem...
Vue使用directive指令实现Element中Dialog等弹框组件的移动与缩放
厉害哥哥的博客
07-30 1227
前言 在使用ElementUI的Dialog等弹框组件中，我们一定有这样的困扰，我们的弹框无法移动，导致下面遮罩的内容不能看到，或者我们的弹框的内容显示不完整，都会影响组件的使用体验。本小节我们通过vue的directive自定义指令实现弹框的移动和缩放的功能。关于directive自定义指令的相关内容请自行参考官方文档学习。源码地址：https://gitee.com/northcangap/atp.git。话不多说，上效果。 正文 创建dialogDrag指令derective.js
解决使用el-dialog之后底层的布局会被向左挤压
qq_52214334的博客
01-03 930
在做vue3+element-plus的时候，很多地方用到了弹窗，但是每次使用弹窗的时候都会发现一个问题，弹窗下面的布局会因为弹窗的出现而被挤压。解决方案，在css初始化的样式中将body的宽度定好，问题解决。仔细观察了一下组件本身的样式，没发现问题。最后将注意点放在了body上面，==
解决elementui的dialog对话框过高会被拖动的bug
没有酒也没有故事。
12-28 2410
在使用elementUI过程中，当dialog对话元素过多长处浏览器高度是，点击标题就会跳成如下图这样，上方会被遮挡且无法拖动上去： 解决方法是通过设置css固定top及left禁止拖动，核心css代码： /deep/.el-dialog { top: 15% !important; left: 0 !important; } ...
【Element-ui - dialog导致滚动条显示和隐藏造成的页面窜动】
weixin_47416539的博客
07-27 720
【代码】【Element-ui - dialog导致滚动条显示和隐藏造成的页面窜动】
vue实现鼠标右键菜单，解决菜单栏位置偏移的问题
q2056105280的博客
05-17 3332
1、先了解鼠标点击偏移的几个属性。 clientY 指的是距离可视页面左上角的距离，受页面滚动的影响。 pageY 指的是距离可视页面左上角的距离，不受页面滚动影响。 screenY 指的是距离电脑屏幕左上角的距离。 layerY 指的是距离元素的左上角距离，受元素的定位的影响，会从本元素往上找到第一个定位的元素的左上角，找到它或它父级元素中最近具有定位的左上角距离。 offsetY 指的是距离它自己左上角的距离，计算相对于本元素的左上角，不在乎定位问题，计算的是内交点。是IE浏览器的特有属性。 .
[vue]el-select下拉框偏移（不贴合）问题
wei3329的博客
12-18 1524
通过设置css样式解决el-select下拉框不贴合
解决element弹窗打开时页面往左抖动
tt1234561009的博客
05-23 936
相信很多人在使用element的弹窗组件el-dialog时都遇到过窗口往左偏移的问题，出现这个问题可能是因为页面出现了滚动条，在窗口打开后body标签上增加了padding-right: 17px;所以，我们可以在代码中强制修改body的样式，如下。
vue3+element plus+typescript实现el-dialog弹框拖拽并添加详细注释，要是公共方法，其他多个组件可以调用
05-26
好的，下面为您提供一份实现el-dialog弹框拖拽的代码，包含详细注释，并且可以作为公共方法供其他组件调用。 首先，我们先创建一个mixin，命名为`dialogDragMixin.ts`，在该文件中实现弹框拖拽的功能。 ```typescript import { DirectiveBinding } from 'vue'; import { ElDialog } from 'element-plus'; // 定义接口，用于存储弹框的位置信息 interface DialogPosition { top: number; left: number; } // 定义一个变量，用于存储弹框的位置信息 let dialogPosition: DialogPosition = { top: 0, left: 0 }; export default { // 指令钩子函数，当元素插入到 DOM 中时执行 mounted(el: HTMLElement, binding: DirectiveBinding) { // 获取el-dialog组件实例对象 const dialog: ElDialog = binding.instance.$parent as ElDialog; // 获取弹框的标题栏元素 const dialogHeaderEl: HTMLElement = el.querySelector('.el-dialog__header')!; // 设置标题栏的样式，使其可以被拖拽 dialogHeaderEl.style.cursor = 'move'; dialogHeaderEl.style.userSelect = 'none'; // 鼠标按下事件处理函数 const handleMouseDown = (event: MouseEvent) => { // 记录鼠标按下时的位置信息 dialogPosition.top = dialog.$el.offsetTop; dialogPosition.left = dialog.$el.offsetLeft; // 记录鼠标按下时的坐标信息 const mouseX = event.clientX; const mouseY = event.clientY; // 鼠标移动事件处理函数 const handleMouseMove = (event: MouseEvent) => { // 计算鼠标移动时的偏移量 const offsetX = event.clientX - mouseX; const offsetY = event.clientY - mouseY; // 更新弹框的位置信息 dialog.$el.style.top = dialogPosition.top + offsetY + 'px'; dialog.$el.style.left = dialogPosition.left + offsetX + 'px'; }; // 鼠标抬起事件处理函数 const handleMouseUp = () => { // 移除鼠标移动事件处理函数和鼠标抬起事件处理函数 document.removeEventListener('mousemove', handleMouseMove); document.removeEventListener('mouseup', handleMouseUp); }; // 添加鼠标移动事件处理函数和鼠标抬起事件处理函数 document.addEventListener('mousemove', handleMouseMove); document.addEventListener('mouseup', handleMouseUp); }; // 添加鼠标按下事件处理函数 dialogHeaderEl.addEventListener('mousedown', handleMouseDown); } } ``` 接下来，我们在需要使用该mixin的组件中引入它，并将其添加到`mixins`属性中即可。 ```vue <template> <el-dialog title="Dialog Title" :visible.sync="dialogVisible" width="30%" :before-close="handleClose" v-dialogDrag > <span>Dialog Content</span> <span slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false">Cancel</el-button> <el-button type="primary" @click="dialogVisible = false">Confirm</el-button> </span> </el-dialog> </template> <script lang="ts"> import { defineComponent } from 'vue'; import dialogDragMixin from './dialogDragMixin'; export default defineComponent({ name: 'MyComponent', mixins: [dialogDragMixin], data() { return { dialogVisible: false }; }, methods: { handleClose(done: () => void) { this.$confirm('Confirm to close this dialog?') .then(() => { done(); }) .catch(() => {}); } } }); </script> ``` 最后，我们可以将`dialogDragMixin`作为一个公共方法，供其他多个组件调用。在`main.ts`中，全局注册该mixin即可。 ```typescript import { createApp } from 'vue'; import App from './App.vue'; import ElementPlus from 'element-plus'; import 'element-plus/lib/theme-chalk/index.css'; import dialogDragMixin from './dialogDragMixin'; const app = createApp(App); // 注册全局mixin app.mixin(dialogDragMixin); app.use(ElementPlus).mount('#app'); ```
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值