vue+element 项目弹窗打开后头部内容左移的问题

最新推荐文章于 2024-01-03 10:40:54 发布

废铁选手

最新推荐文章于 2024-01-03 10:40:54 发布

阅读量1k

点赞数

文章标签： vue.js elementui 前端

本文链接：https://blog.csdn.net/qq_38344363/article/details/122259218

版权

这个问题比较简单，很多人会陷入一个误区，就是想是不是组件有什么问题或者是不是因为滚动条占位导致的头部内容左移。

其实是layout的头部占位被挤压的问题，只要给layout的头部加上宽度100%，就可以解决这个问题，也可以直接加上绝对定位让头部不占用空间来解决，这样也可以避免被挤压。

这是弹窗打开后的头部占位，明显被挤压了，正常应该是占总宽度的100%，具体为什么会被挤压我也不太清楚，希望有大神可以解释

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

废铁选手

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

vue+element 设置弹窗_封装Vue Element的dialog弹窗组件

weixin_32567865的博客

02-11

1964

我本没有想着说要封装一个弹窗组件，但有同行的朋友在问我，而且弹窗组件也确实在项目开发中用的比较多。思前想后，又本着样式统一且修改起来方便的原则，还是再为大家分享一个我所封装的弹窗组件吧。其实，并不是所有封装组件的方式都是一成不变的，你可以采用函数式组件这种能提高性能的方式，也可以使用带有状态和生命周期的普通组件的封装方式。但像dialog这种包含很多点击事件如确定或提交事件、取消或重置事件、右上角...

vue+element弹窗可拖拽拉伸和弹窗内table高度自适应

李墨瞳的博客

12-10

3535

vue+element的弹窗，自定义指令实现弹窗可拖拽拉伸。解决因为拉伸事件导致的无法选中弹窗里表单文字的问题。添加了边界判断条件，不允许拖到可视范围之外了。添加了弹窗如果有表格，对表格进行自适应的功能

参与评论您还未登录，请先登录后发表或查看评论

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

weixin_44066534的博客

09-05

6429

在vue项目中里使用Element的el-dialog组件问题1：原先的页面有滚动条，再引入弹出框之后又出现滚动条 解决方法：找到弹出框对应的class再将overflow设置为hidden 问题2：组件引起原页面偏移修改完之后滚动条没了但是滚动条的位置还在，这导致了弹框出现的时候原来的页面会向左边偏移，引起页面的抖动一番检查后发现问题所在：弹框出现的时候body上会被动态的添加上一个class和style 例如：点击弹框前的body 点击弹框之后一开始一直把关注点放在组件上，甚至怀疑是e

解决element弹窗打开时页面往左抖动

tt1234561009的博客

05-23

810

相信很多人在使用element的弹窗组件el-dialog时都遇到过窗口往左偏移的问题，出现这个问题可能是因为页面出现了滚动条，在窗口打开后body标签上增加了padding-right: 17px;所以，我们可以在代码中强制修改body的样式，如下。

vue中el-dialog弹窗出现时页面整体左移

m0_73857425的博客

04-23

902

【代码】vue中el-dialog弹窗出现时页面整体左移。

解决使用el-dialog之后底层的布局会被向左挤压

qq_52214334的博客

01-03

728

在做vue3+element-plus的时候，很多地方用到了弹窗，但是每次使用弹窗的时候都会发现一个问题，弹窗下面的布局会因为弹窗的出现而被挤压。解决方案，在css初始化的样式中将body的宽度定好，问题解决。仔细观察了一下组件本身的样式，没发现问题。最后将注意点放在了body上面，==

bootstrap弹窗导致内容区左移

weixin_30675967的博客

06-09

113

用bootstrap在多次弹窗后导致了内容区左移动了，如下：最后只要加上如下代码，就可以了 body{ padding-right: 0!important; } 同时，在默认的弹窗是右边的滑轮是不能滑动的 .modal-open { overflow: initial; } 便可以了.modal-open是在弹窗时加在body上的...

导航fixed定位，弹框出现后导航位置偏移（Vue+element ）

波客

06-02

674

因为导航是浏览器定位，页面有滚动条，所以宽度即使为100%也不是屏幕宽度。当Element的弹框出现后，滚动条锁死，导航所在的页面滚动条消失，导航的宽度增加，所以会出现偏移的现象。解决方法 ...

vue+elementUI 组件弹窗

qq_42897782的博客

04-02

6361

需求：点击按钮，弹窗（这里的弹窗使用外部组件）效果图：页面中： “查看详情”点击触发 examineBtn() 方法， <template> <div> <div style="height: 73vh"> <el-table :data="showData" style="width: 100%" :hea...

【vue+leaflet+elementUI】vue项目中在Leaflet弹框Popup中使用elementui组件(三)

最新发布

03-01

【vue+leaflet+elementUI】vue项目中在Leaflet弹框Popup中使用elementui组件(三)cv可用【vue+leaflet+elementUI】vue项目中在Leaflet弹框Popup中使用elementui组件(三)cv可用【vue+leaflet+elementUI】vue项目中在...

vue+element-ui项目搭建步骤

weixin_50800839的博客

04-29

2323

前提条件：node，webpack，cnpm 1、vue create 【projectname】（项目名称不能有大写字母） 2、项目创建完成后，生成以下目录 3、运行：npm run serve(或dev，具体查看package.json文件中的命令) 4、element-ui引入（html文件）： ①cdn引入（同时包括vue文件的cdn引入） <!DOCTYPE html> <html lang="en"> <head> <meta charset=

vue中解决弹窗出现之后背景滚动（移动端）

zpcqdkf的博客

03-19

1997

watch: { show(v) { this.toggleContainerTouchAction(v) if (v) { document.body.addEventListener('touchmove', this.stopTouch, { passive: false, capture: true }) } else { ...

vue 局部监听下拉框滚动(@scroll=)

weixin_47382414的博客

05-17

854

需求：页面局部box列表滚动，数据初始显示十条，触底后显示下个十条。由于后台返回了全部数据，所以数据就需要自己处理了；给父盒子添加@scroll=“scrollEvent” 可获得父盒子的可视高度和滚动条高度(盒子本身要有高度才会被触发) 父盒子固定高度用于滚动条及触发，关系对比中，文档高度要获取子盒子的 <div class="user-right-card" ref="card" @scroll="scrollEvent"> <div ref="cardChild">&l

左右移动数据vue+elementui

weixin_48289449的博客

09-05

2372

功能：将两个表格中的数据进行移动，针对内容较多的表格+上下移动的功能。

vue+elemen ui实现左侧导航栏，右侧内容变化

GUANYX的博客

09-27

9999

一、首先编写导航栏组件我的页面是大项目中的一部分，项目之前已经安装了路由等。首先在component中添加guide.vue文件。选择element的一个组件，示例代码如下 <template> <el-container style="height: 500px; border: 1px solid #eee"> <el-aside width="20...

头部进度条随滚动轴变化而变化

ZXH0122的博客

08-28

112

【代码】头部进度条随滚动轴变化而变化。

vue element-ui Notification 挤在一起，重叠问题解决办法

weixin_44493841的博客

04-13

1785

代码 <script> this.$notify.error({ title: "连接失败", message: "终端 " + ip_list[i].ip_address + " 连接异常", duration: 30000, offset: 100 }); </script> 改为 </script> await this.$not

elementui 踩坑（一）解决时间选择器位置变动问题

weixin_44504742的博客

10-24

8725

问题描述先放图，如下当表单元素内容过长时，就会产生日期时间组件弹框挤到上面去，但开始的时间又是在下面显示的，就会产生不美观的效应，于是，为了更加优化，解决时间日期组件位置固定的问题，可采取如图方法：尽量将包含日期时间的组件放到表单的最前面，这样就可以避免因表单过长出现弹框挤压的问题。 ...

vue 页面首次加载缓慢原因及解决方案，打包代码压缩Gzip，图片压缩

ingenuou_的博客

11-15

1877

vue 页面首次加载缓慢原因及解决方案，打包代码压缩Gzip，图片压缩

vue+element 设置弹窗_vue+element table的弹窗组件

05-17

您可以使用 Element UI 中的 Dialog 组件来创建弹窗，再在弹窗中添加 Table 组件。以下是一个示例代码： ```html <template> <div> <el-button @click="showDialog">打开弹窗</el-button> <el-dialog :visible.sync="dialogVisible"> <el-table :data="tableData"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> </el-table> </el-dialog> </div> </template> <script> export default { data() { return { dialogVisible: false, tableData: [ { name: '张三', age: 18 }, { name: '李四', age: 20 }, { name: '王五', age: 22 } ] } }, methods: { showDialog() { this.dialogVisible = true } } } </script> ``` 在上面的代码中，我们在模板中添加了一个按钮，点击按钮会显示一个弹窗。弹窗中包含了一个 Table 组件，表格数据使用了一个数组来模拟。您可以根据您的需求修改表格数据和弹窗中的组件。