el-dialog中footer插槽踩坑记录

已于 2024-01-08 12:27:46 修改
阅读量889 收藏 6
点赞数 8
文章标签： vue.js javascript 前端
于 2024-01-08 10:39:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zh814l/article/details/135450473
版权
作者在el-dialog的footer插槽中使用自定义div按钮遇到文本不显示问题，经过排查发现原因是未设置append-to-body属性。添加该属性后，问题得到解决，尽管之前对样式进行了调整但未生效。
摘要由CSDN通过智能技术生成

el-dialog中footer插槽中的按钮只能用el-button，否则文字不出现，调整了任何style样式都没用。

我的按钮是用div写的，因为用button按钮要改的样式太麻烦了，就直接自己写了，结果就是出不来文字，检查了2个多小时也没找到原因，然后改成文档中的button就出来了，但是我写弹框一直都用的div，别的都没出现这个问题。

接着开始找不同，最后发现居然是append-to-body没加的问题，在el-dialog标签加上就好了，唉！

zh814l
关注
  • 8
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
el-dialog 底部按钮固定 中间部分滚动条滑动
weixin_58414196的博客
09-01 2554
【代码】el-dialog 底部按钮固定 中间部分滚动条滑动。
elementui dialogfooter固定在底部（粘性定位）
HUANGRUI的博客
07-31 5949
css粘性定位，footer固定在底部
Elementui，通过Dialog，实现全局动态confirm自定义弹窗，不需要各页面单独引入组件（可显示页面、html、代码高亮显示、普通文字）
qq_40591925的博客
06-23 1万+
Elementui，通过el-dialog，实现confirm 弹窗
vue数据增删改查及表单验证
qq_64001795的博客
10-14 3635
图三。
Element组件浅尝辄止6：Dialog 对话框组件
渣渣砖
08-27 2221
Dialog 对话框组件：在保留当前页面状态的情况下，告知用户并承载相关操作。 大白话就是弹窗组件，日常开发中比较常见
vue el-dialog 实现弹窗无限嵌套（点击弹窗弹出新的弹窗，可以一直点击）
记录常见的问题以及解决办法
03-23 9042
创建文件夹 testDialog 文件夹 根据自己需要创建文件夹（这个是我用于演示的，根据自己项目自行创建就可以）要求点击数据展示弹窗，弹窗中数据点击显示新的弹窗，里面的弹窗还可以继续点击新的弹窗，可以无限制的嵌套弹窗。剩下两个文件按照这个自行创建即可 想无限制循环 最后一个文件的弹窗写到第一个 就可以无限制嵌套！原因：因为有些弹窗既是父弹窗又是子弹窗，所以使用的时候会报错，报一个循环嵌套错误。可以一直无限制的点击 无限制的嵌套。commonData.js 文件。
element ui 对话框el-dialog关闭事件详解
08-27
在 Element UI 中，`el-dialog` 是一个非常重要的组件，它用来创建对话框或者称为模态窗口，常用于显示警告、确认操作或者进行表单输入等场景。 `el-dialog` 的关闭事件是开发过程中经常会用到的功能，特别是在需要...
elementui更改el-dialog关闭按钮的图标d的示例代码
10-15
在Element UI框架中，`el-dialog` 是一个用于创建弹出式对话框的组件，它在用户界面中常用于显示重要信息或者进行确认操作。在某些设计需求下，可能需要自定义`el-dialog`的关闭按钮图标以符合特定的品牌风格或者...
基于element-ui对话框el-dialog初始化的校验问题解决
10-14
2. **监听关闭回调清除校验**：在`el-dialog`的关闭回调中，如`@closed`事件，执行清除校验的方法，如`clearValidate()`或`resetFields()`。这种方法可以确保对话框关闭时清理校验状态，但可能在某些情况下无法正常...
element-ui对话框dialog详解
m0_63040701的博客
05-27 5171
先给大家展示一下大致的样式draggable：为 Dialog 启用可拖拽功能destroy-on-close：当关闭 Dialog 时，销毁其中的元素v-model="dialogAddVisible"：绑定对话框的状态title="添加用户"：对话框的标题width="35%"：对话框宽度center：是否让 Dialog 的 header 和 footer 部分居中排列。
element-ui修改dialog样式全局、局部修改问题 el-dialog__title/el-dialog__header/el-dialog__body/el-dialog__footer
关注我看更多东西
04-30 1万+
//没有scoped全局css全部文件生效但是其他地方用dialog样式也会生效 //有scoped为局部css --scoped只在本文件生效在这里设置el-dialog__header不生效 //因此通过el-dialog的class进行全局css中局部定义 只在当前文件生效 <template> <el-container><el-main> <el-button type="text" @click="centerDialogVisible ..
Element UI常用组件dialog简要介绍二以及V3父子间的通信
weixin_53818172的博客
07-05 855
表单对话框： Dialog组件可以作为一个包含表单的对话框，用于接收用户输入。可以在对话框中放置表单元素，并通过配置。自定义对话框样式： Element-UI Dialog组件提供了丰富的样式配置选项，可以通过设置。确认对话框： Dialog组件可以用来显示确认信息，并等待用户确认或取消操作。属性来设置对话框的标题，通过插槽（slot）在对话框中插入内容，以及通过。属性和事件来控制对话框的显示和隐藏。以v3和elementplus为例。事件来监听用户的确认和取消操作。属性来自定义对话框的样式。
将一个对话框的.el-dialog__header ，.el-dialog__footer，.el-dialog__footer设置背景色，并且不影响其他对话框的.el-dialog__header
最新发布
qq_45349764的博客
09-05 535
【代码】将一个对话框的.el-dialog__header ，.el-dialog__footer，.el-dialog__footer设置背景色，并且不影响其他对话框的.el-dialog__header。
实现el-dialog的拖拽，全屏，缩小功能
weixin_34138139的博客
05-09 7842
基于el-dialog， 封装了一下。，实在懒得写，所以直接把代码 粘出来了 大概粘了一下效果。自己体会把。 组件使用 <el-dialog v-dialogDrag ref="xhzqDialog" class="xhzqDialog" :title="title" :fullscreen="isf...
vue+elementUI：如何封装dialog来适应不同展示内容
wzy_PROTEIN的博客
04-07 2134
前言：在日常开发时有时一个页面需要弹出很多个不同的弹出框，如果全都堆在一个页面里会非常累赘且不可复用。需要写一个可以适应不同展示内容的dialog组件。
二次封装el-dialog组件，自定义组件应用v-model的实践
qq_41885295的博客
12-21 3356
我们在使用element-ui的时候，如果一个弹窗中的内容很多、复用率高，那么我们经常会把这个弹窗封装成一个组件
ElementUI的Dialog弹窗实现全局命令拖拽移动功能
weixin_67307854的博客
05-18 2362
现在这样效果是实现了，但是会有一个问题就是每次重新打开不是居中的有点小bug，可以直接v-if判断一下，条件和:visible.sync="dialogVisible"是一样的，这样每次关闭都回到原来的位置。其次在src文件下创建utils文件，在utils文件下创建全局拖拽文件directive.js。最后只需要在el-dialog组件上添加属性v-dialogDrag。在main.js文件里面引用directive.js。首先创建elementui的dialog组件。
Vue手脚架
yuxiazu的博客
07-26 342
/span>（games数据在Category组件中，但使用数据所遍历出来的结构由App组件决定）2.浏览器的历史记录有两种写入方式分别为```push```和```replace```，```push```是追加历史记录，```replace```是替换当前记录。路由跳转时候默认为```push```3.组件中修改vuex中的数据```$store.dispatch('action中的方法名',数据)```或```$store.commit('mutations中的方法名',数据)```...
el-dialog(对话框)入门学习
热门推荐
qq_40765784的博客
06-24 4万+
el-dialog的入门学习
如何让el-button 在 el-dialog中水平居中
05-18
可以通过设置 `.el-dialog__footer` 的样式来让 `el-button` 在 `el-dialog` 中水平居中。 首先，在 `el-dialog` 中添加一个 `footer` 插槽，然后在插槽中添加 `el-button`。 ```html <el-dialog> <template #footer> <el-button>按钮</el-button> </template> </el-dialog> ``` 然后，在 `style` 中设置 `.el-dialog__footer` 的样式，将其内部子元素水平居中即可： ```css .el-dialog__footer { text-align: center; } .el-dialog__footer button { margin: 0 auto; display: inline-block; } ``` 这样，`el-button` 就会水平居中在 `el-dialog` 的底部。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值