vue使用element-ui中对话框的问题

最新推荐文章于 2024-05-19 16:51:01 发布
最新推荐文章于 2024-05-19 16:51:01 发布
阅读量1.9k 收藏
点赞数
分类专栏： 问题 文章标签： vue+element 使用vue+element出现的问题 使用vue+element遇到的坑
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shadowHunt/article/details/94468859
版权

在vue的组建中使用element-UI的对话框,效果可以实现,但是出现以下的问题
1、点击调用对话框,遮罩层没有出现,官方文档里的属性都试了没有效果(我用css>>>穿透给body加上的)
2、对话框显示的时候添加lock-scroll锁定滚动条无效(我在组件外测试过可以用)
是不是因为我在组件中写,和什么地方冲突了吗?

H₂O°
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue+element-ui使用
01-06
现在，你可以开始在 Vue 组件中使用 Element UI 的组件了。例如，要创建一个按钮，只需在模板中这样写： ```html <el-button>默认按钮</el-button> ``` 这里 `<el-button>` 就是 Element UI 中的按钮组件。...
基于element-ui对话框el-dialog初始化的校验问题解决
10-14
在使用Element-UI框架开发前端应用时，遇到的一个常见问题是关于`el-dialog`对话框的初始化校验问题。`el-dialog`是Element-UI提供的一个模态对话框组件，它通常与`el-form`结合使用，用于数据输入和验证。然而，当...
VUE+elementUi 后台管理系统踩坑日记（el-dialog）
qq_41915620的博客
03-05 2583
VUE+elementUi 后台管理系统踩坑日记 （el-dialog） el-dialog弹窗组件踩坑，https://element.eleme.cn/2.8/#/zh-CN/component/dialog。 从文档中得知当弹窗打开时是默认body禁止滚动的，但是项目中发现当弹窗打开时候body滚动并没有被禁止。 设置了lock-scroll=true之后依旧无法禁止body滚动。 ...
vue element dialog 对话框
Claroja
02-16 362
通过绑定:visible.sync属性来控制对话框 <template> <el-card> <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button> <el-dialog title="提示" :visible.sync="dialogVisible" width="30%"> <span>这是一段信息&lt
详细分析Element Plus中的ElMessageBox弹窗用法（附Demo及模版）
最新发布
码农研究僧的博客
05-19 4298
Element Plus 是一个基于 Vue 3 的组件库，其中包括各种类型的弹窗组件，用于在网页上显示信息或与用户进行交互 主要的弹窗组件包括 ElMessageBox.alert、ElMessageBox.prompt 和 ElMessageBox.confirm 等
Javaweb之Vue组件库Element之Dialog对话框的详细解析
qq_69748833的博客
11-27 576
visible属性绑定的dialogTableVisble属性一开始默认是false，所以对话框隐藏；然后我们点击按钮，触发事件，修改属性值为true，Dialog: 在保留当前页面状态的情况下，告知用户并承载相关操作。其企业开发应用场景示例如下图所示。那么ElementUI是如何做到对话框的显示与隐藏的呢？然后对话框visible属性值为true，所以对话框呈现出来。然后复制如下代码到我们的组件文件的template模块中。visible.sync ：是否显示 Dialog。
elementUI踩坑之关于dialog弹框
Livvvvv_的博客
08-10 2767
** dialog组件的属性–lock-scroll ** elementUI官方解释 先描述下页面：pc端 一个很长的关于作品评选投票的页面，根据页面滚动距离进行分页按需加载，列表中的对象支持投票或取消投票。 描述功能：1.若当前作品支持投票，可点击投票按钮，点击后会出现一个弹框，内容显示可投票数，点击确定后掉投票接口，进行投票，成功后弹框关闭；需要刷新列表并且页面仍需显示至投票前的位置。 2.当前作品若已被投票，按钮则为取消投票按钮，点击按钮后直接发送请求，成功后直接刷新页面，也需要显示投票前的位置。
elementui-plus el-dialog弹出时body有滚动条，修改了body样式
u014220146的博客
08-30 3308
使用组件el-dialog弹窗，写在二级组件中。
VUE+ElementUI dialog打开时禁止iOS端的body滚动
Akikang的博客
12-26 2026
现象： 在原生app中嵌套web页面时，时常会遇到由于系统不同带来的差异。 此次引入ElementUI，使用其中的dialog组件时，明明默认dialog显示时，body不能滚动： 安卓和pc下没毛病，但在iOS下lock-scroll无效，dialog背后的body依然可以滚动。 解决方法： 思路： 主要是在打开dialog时设置html的 ...
vue实现element-ui对话框可拖拽功能
10-18
主要介绍了vue实现element-ui对话框可拖拽功能，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue中正确使用Element-UI组件的方法实例
10-14
在完成引入之后，为了验证 Element-UI 是否成功安装，可以尝试在 `.vue` 文件中使用 `<el-button>` 标签： ```html <el-button>el-button</el-button> ``` 然后运行 `npm run serve` 启动项目，如果看到一个...
element-UI 问题总结
思琦
02-23 229
Dialog组件 页面有滚动条，弹框时，滚动条消失，页面模块内容移动，解决方法 <el-dialog :title="formTitle" :visible.sync="dialogFormVisible" :lock-scroll="false" //主要是这个属性 :append-to-body="true" //跟这个属性 :close-on-click-modal="false" width="1000px" ></el-dia
【element】解决element弹框组件el-dialog导致页面抖动问题：
SunPeng的博客
06-23 1849
【element】解决element弹框组件el-dialog导致页面抖动问题：
element-ui 表格滚动栏 无效 失效 element-table 滚动栏失效 element表格滚动栏失效 解决 element -表格 滚动栏 不见失效 解决 表格滚动栏失效
半只
07-19 6157
滚动栏只有细细的一条线，根本看不见， 这个问题不知道是怎么出现的，有帖子说是因为固定列造成的， 有帖子说是 列文字溢出造成的。插件，因为这个插件套的就是 element-table组件，不需要额外代码，原装使用。可是这些问题我都没有出现，一开始项目是有滚动栏的，不知道从什么时候开始就变没了。不然 当前页面样式无法穿透到 element表格源css。我使用的比较多的就是。
vxe-modal中的lock-view遇到的问题
mongchu的博客
09-01 239
vxe-modal中lock-view属性生效
element中dialog出现滚动条记录位置问题
qq2276031的博客
05-12 3128
element中dialog出现滚动条记录位置问题 //弹窗出现滚动条的时候滚动到最底下，下次在点开的时候还在最底下，可以通过以下方式解决 <el-dialog :title="formTitle" :visible.sync="dialogFormVisible" :lock-scroll="false" //主要是这个属性 :append-to-body="true" //跟这个属性 :close-on-click-modal="false"
使用element-ui的弹出窗口时，由于滚动条造成的页面闪动问题
riluokk的博客
05-25 5377
问题： 在使用element-ui的el-dialog时，由于遮罩层的出现，导致页面的滚动条隐藏，从而使页面出现闪动的效果。 解决过程 当遇到这个问题时，我想能不能是滚动条悬浮于页面上，及脱离文本流，从而不影响页面的宽度，于是我百度时发现了这个css属性，及在body或者盒子上添加 body:{ overflow:overlay } 这个可以使页面滚动条的隐藏和显示影响页面的宽度，但是这个问题存在兼容性问题，且是一个被‘废弃’的属性，于是我就放弃了这个想法。 于是我继续翻看element-ui的文档，发
以element ui为例分析前端各种弹窗和对话框的使用场景与区别
字节叔叔
01-18 6734
本文研究分析element ui 中的各种弹窗和对话框，包括了：Dialog 对话框，Drawer 抽屉，MessageBox 弹框，Popconfirm 气泡确认框，Message 消息提示，Notification 通知。同时说明了Dialog 对话框与Drawer 抽屉的区别、MessageBox和Dialog的区别以及Message消息提示与Notification通知的区别。
Vue中使用element-ui的el-dialog 拖动对话框
05-30
要在Vue中使用element-ui的el-dialog对话框并实现拖动功能，可以使用vue-draggable-resizable插件来实现。 1. 安装插件 使用npm或者yarn进行安装。 ``` npm install vue-draggable-resizable --save ``` 或者 ``` yarn add vue-draggable-resizable ``` 2. 引入插件 在Vue组件中引入vue-draggable-resizable插件，并注册为全局组件。 ```javascript import Vue from 'vue' import VueDraggableResizable from 'vue-draggable-resizable' import 'vue-draggable-resizable/dist/VueDraggableResizable.css' Vue.component('vue-draggable-resizable', VueDraggableResizable) ``` 3. 使用插件 在el-dialog组件中嵌套vue-draggable-resizable组件，并设置对话框的宽度和高度。 ```html <template> <div> <el-button type="primary" @click="dialogVisible = true">打开对话框</el-button> <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose"> <vue-draggable-resizable :w="dialogWidth" :h="dialogHeight"> <p>这是一个可以拖动的对话框</p> </vue-draggable-resizable> </el-dialog> </div> </template> <script> export default { data() { return { dialogVisible: false, dialogWidth: 400, dialogHeight: 300 } }, methods: { handleClose(done) { this.dialogVisible = false done() } } } </script> ``` 在这个示例中，我们将vue-draggable-resizable组件嵌套在el-dialog组件中，并设置了对话框的宽度和高度。我们还定义了一个handleClose方法来处理对话框关闭的事件。 现在你可以在Vue中使用element-ui的el-dialog对话框并实现拖动功能了。注意：vue-draggable-resizable插件的样式可能需要根据自己的需求进行调整。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值