element-ui中弹框dialog不显示的问题

最新推荐文章于 2024-06-17 15:58:57 发布
最新推荐文章于 2024-06-17 15:58:57 发布
阅读量3.6w 收藏 14
点赞数 30
分类专栏： Vue vue2.0进阶笔记 文章标签： element-UI vue 弹框
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xr510002594/article/details/82428801
版权

今日遇一小坑，使用elementUI的时候，项目中需要做一个换头像的功能，因为项目结构原因，我写了一个组件，点击头像出现弹框，并且可以上传头像，但是遇到一个问题，在作为组件的时候，弹框只显示弹层但是不显示框，仔细查看了文档，发现有个关键属性append-to-body，他默认是false，我们给他设置为true，写在<el-dialog>标签里。

 <el-dialog title="修改头像" :visible.sync="changeicon" width="30%" :append-to-body="true" >

下面为文档中的属性介绍，默认是false

加上这个属性之后，弹框就出来了。

Dreamer_xr
关注
  • 30
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 14
    评论
专栏目录
基于element-ui对话框el-dialog初始化的校验问题解决
10-14
在使用Element-UI框架开发前端应用时，遇到的一个常见问题是关于`el-dialog`对话框的初始化校验问题。`el-dialog`是Element-UI提供的一个模态对话框组件，它通常与`el-form`结合使用，用于数据输入和验证。然而，当...
element-ui资源包
08-03
Element UI 提供的组件包括但不限于按钮、表格、表单、日期选择器、下拉菜单、轮播图、提示信息、对话框、通知、布局等，这些组件都遵循了 Material Design 设计规范，具有良好的交互性和一致性。在实际开发中，你...
element-plus弹框无法正常显示
zxdznyy的博客
08-31 894
截至道这里，bug来啦。我的做法是在表格组件中写的按钮，el-dialog就放在按钮下面。结果按钮显示不出来。写法也没有任何问题。技术栈是Vue3，用到的组件库是element-plus。要做的是在一个表格中，给表格后面添加一个按钮，点击按钮后，会出现弹框。还是要注意，Vue项目用到组件库，在已有的组件中尽量不要堆叠别的element组件，否则就会出现类似的问题，还不好找到原因。最后把弹框拿出来放在表格外就可以了。
el-dialog在vue3项目中不显示问题
Fore_的博客
02-24 2760
vue3项目开发有关elementplus问题
Element-UI实现el-dialog弹框拖拽功能
最新发布
觉醒法师的专栏
06-17 2020
在实际开发中，会发现很多系统中弹框是可以在浏览器可见区域自由拖拽的，这极大方便用户的操作。在查看Element-UI中弹框（el-dialog）组件的文档说明后，发现并未实现这一功能，不过也无须担心，vue中提供了Vue.directive钩子函数，可以从底层操作DOM来实现并升级弹框的拖拽功能。
解决vue2项目 el-dialog弹窗不显示
paradoxaaa_的博客
12-22 1599
将v-model改为:visible.sync="dialogVisible" 就可以了。我们还需要增加一个配置：:append-to-body="true"初始写法 使用了v-model 弹窗不显示。但是此时的弹窗在遮罩层底下 无法点击关闭。
使用vue3+Element plus开发移动端Dialog打不开问题
m0_51531740的博客
08-22 2319
然后我把模态框中的el-form删除，来测试模态框是否实现，打包后发现模态框正常，于是问题在于其中的el-form，之后使用input标签和button标签，打包后发现原生H5标签不影响模态框，于是就将el-form换成了form，打包测试发现使用form仍无法解决问题，但是不用包裹的input标签和button标签可以显示，于是删除外层的标签，问题解决。之后发现可以在模态框中使用，推测使用vue3开发移动端时，模态框的实现控制不了多层复杂标签。
[已解决]Vue3+Element-plus使用el-dialog对话框无法显示
bfbshs_ddd的博客
03-30 2161
开发时，发现点击按钮不能显示想要的对话框，发现这与组件层级有关系
element-ui中弹框dialog不显示
热门推荐
Evan's Blog ٩(๑❛ᴗ❛๑)۶
02-14 1万+
一、问题描述 今天在写vue项目时候， 遇见如下需求：点击编辑按钮弹出一个dialog,dialog中的表单展示当前行显示数据，然后编辑后保存。 但是我点击后，出现了遮罩层，但是dialog怎么也不显示，如图。 二、解决方案 这里是由于一个属性没有设置正确导致的问题。在el-dialog 标签内，添加如图红色矩形框内所示属性。 且设置为ture，即可解决问题。 正确效果： 三、文档说明 我们...
el-dialog的v-model的状态已经改变但是却不显示弹窗
weixin_45779102的博客
08-20 2586
1、如果有遮罩层出现但是弹窗被遮挡，根据element的文档： “正常情况下，我们不建议使用嵌套的 Dialog，如果需要在页面上同时显示多个 Dialog，可以将它们平级放置。对于确实需要嵌套 Dialog 的场景，我们提供了append-to-body属性。将内层 Dialog 的该属性设置为 true，它就会插入至 body 元素上，从而保证内外层 Dialog 和遮罩层级关系的正确。” 2、如果弹窗和遮罩层都不显示，有可能是弹窗内容出现了错误，可以试着把里面的内容逐个注释试验一下。 ...
解决el-dialog使用时无法正常弹出的问题
weixin_43550562的博客
04-24 5795
在使用el-dialog,发现无论怎么做,该对话框也无法显示,前端也没有报错. 点击按钮时,发现遮罩层已经出来了,但对话框没有显示. 经查,缺少属性append-to-body,将该值设置为true即可 <!--审批悬浮框--> <el-dialog class="el-dialog__width" ...
ElementPlus Dialog 对话框点击不弹出
yuyangll的博客
05-06 4477
在写项目的途中使用了 Dialog弹窗，去官网查看时发现官网的语言是用的 typescript，而我用的是JavaScript 后边在w3c找到用JavaScript的参考代码 <template> <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button> <el-dialog title="提示" v-model="dialogVisible" w
解决element-ui组件库中dialog组件只显示遮罩层，未显示弹框的问题
weixin_67898309的博客
07-04 1975
以下是直接粘贴的组件--基础用法 点击打开 Dialog 这是一段信息
element-ui中dialog弹窗关闭按钮失效的解决
10-14
主要介绍了element-ui中dialog弹窗关闭按钮失效的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Element-ui css非网络引用，
07-26
Element-ui css非网络引用 <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css1"> <link rel="stylesheet" href="/js/vue/index.css"> <el-button @click=...
关于Vue3中，element-plus的el-dialog对话框无法显示的可能原因。
ky51336的博客
05-07 7378
关于Vue3中，element-plus的el-dialog对话框无法显示的可能原因。
4种方案教你彻底解决vue + el-dialog的model的状态已经改变但是却不显示弹窗,×号点击后异常无法显示弹框
tangdou369098655的博客
02-22 1994
如果你是VUE2.X，请检查你是否在:visible这个属性上加.sync，就像这样:visible.sync=“dialogVisble”，vue3应该是v-model的绑定方式，请去查文档~如果方案1没有解决，可以尝试将x号绑定和取消一样的方法来进行关闭。找到元素，手动在dom里面把mask的display改成show。欢迎大家指出文章需要改正之处~
关于Element的dialog弹框失效的问题
L_s_h_123456的博客
05-22 3984
关于Element的dialog弹框失效的问题 <template> <!-- Form --> <el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button> <el-dialog title="收货地址" v-model="dialogFormVisible"> <el-form :model="form"> &l
vue+element-ui：使用el-dialog时弹框不出现问题
qq_42785151的博客
01-25 8315
<el-dropdown-item><el-button type="text" @click="dialogVisible = true">退出登录</el-button></el-dropdown-item> <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
前端vue element-ui 中的 dialog实现边框放大缩小
05-30
要实现vue element-ui中的dialog边框放大缩小，可以使用CSS的transform属性和transition属性来达到效果。具体实现步骤如下： 1. 首先，在dialog组件中添加一个div元素作为边框，设置其样式为绝对定位、宽高100%、边框的宽度和颜色等。 2. 然后，使用CSS的transform属性和transition属性来实现放大缩小效果。将div元素的transform属性设置为scale(1)（原始大小），并设置transition属性为all 0.3s ease-in-out（缩放动画时间和缓动效果）。 3. 最后，在需要放大缩小边框的时候，使用Vue的$refs来获取到该div元素，并将其transform属性设置为scale(1.2)（放大）或scale(1)（缩小）即可。 下面是一个简单的示例代码： ``` <template> <el-dialog :visible.sync="dialogVisible" :title="title" :width="width" :before-close="handleClose"> <div class="dialog-border" ref="border"></div> <div>{{ content }}</div> </el-dialog> </template> <script> export default { data() { return { dialogVisible: false, title: 'Dialog标题', width: '50%', content: 'Dialog内容' } }, methods: { handleClose(done) { this.$refs.border.style.transform = 'scale(1)'; setTimeout(() => { done(); }, 300); }, handleClick() { this.dialogVisible = true; this.$refs.border.style.transform = 'scale(1.2)'; } } } </script> <style scoped> .dialog-border { position: absolute; width: 100%; height: 100%; border: 2px solid #409EFF; top: 0; left: 0; transform: scale(1); transition: all 0.3s ease-in-out; } </style> ``` 以上代码仅供参考，具体实现方式可以根据实际需求进行调整。
评论 14
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值