el-dialog中footer插槽踩坑记录

已于 2024-01-08 12:27:46 修改
阅读量881 收藏 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_34138139的博客
05-09 7838
基于el-dialog， 封装了一下。，实在懒得写，所以直接把代码 粘出来了 大概粘了一下效果。自己体会把。 组件使用 <el-dialog v-dialogDrag ref="xhzqDialog" class="xhzqDialog" :title="title" :fullscreen="isf...
基于element-ui对话框el-dialog初始化的校验问题解决
10-14
2. **监听关闭回调清除校验**：在`el-dialog`的关闭回调中，如`@closed`事件，执行清除校验的方法，如`clearValidate()`或`resetFields()`。这种方法可以确保对话框关闭时清理校验状态，但可能在某些情况下无法正常...
el-dialog 底部按钮固定 中间部分滚动条滑动
weixin_58414196的博客
09-01 2547
【代码】el-dialog 底部按钮固定 中间部分滚动条滑动。
elementui dialogfooter固定在底部（粘性定位）
HUANGRUI的博客
07-31 5928
css粘性定位，footer固定在底部
将一个对话框的.el-dialog__header ，.el-dialog__footer，.el-dialog__footer设置背景色，并且不影响其他对话框的.el-dialog__header
qq_45349764的博客
09-05 533
【代码】将一个对话框的.el-dialog__header ，.el-dialog__footer，.el-dialog__footer设置背景色，并且不影响其他对话框的.el-dialog__header。
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对话框组件title插槽的使用
热门推荐
hbjiankely的博客
03-06 2万+
dialog对话框组件title属性的slot使用方法 使用背景 需要单独控制title中某个数据显示及样式 &lt;el-dialog // 也可以这样写,但是没有办法单独控制name age的显示 // title="name+ '' + age" title="提示" :visible.sync="dialo...
element ui 对话框el-dialog关闭事件详解
08-27
在 Element UI 中，`el-dialog` 是一个非常重要的组件，它用来创建对话框或者称为模态窗口，常用于显示警告、确认操作或者进行表单输入等场景。 `el-dialog` 的关闭事件是开发过程中经常会用到的功能，特别是在需要...
elementui更改el-dialog关闭按钮的图标d的示例代码
10-15
在Element UI框架中，`el-dialog` 是一个用于创建弹出式对话框的组件，它在用户界面中常用于显示重要信息或者进行确认操作。在某些设计需求下，可能需要自定义`el-dialog`的关闭按钮图标以符合特定的品牌风格或者...
elementui的dialog组件无法获得内部dom元素(插槽)解决方法
qq_52845451的博客
09-21 1118
elementui的dialog组件无法获得内部dom元素(插槽)解决方法
el-dialog 自定义插槽放入el-tabs组件页面卡死
m0_61195004的博客
08-02 438
2. 在el-tabs加上v-if判断，这是因为。1.弹框组件二次封装，插槽中放入el-tabs。组件在隐藏的时候会继续保持渲染，即使在。
Dialog对话框
qq_37881565的博客
08-24 528
Dialog对话框 在保留当前页面状态的情况下，告知用户并承载相关操作。 基本用法 需要设置visible属性，它接收Boolean，当为TRUE时，显示Dialog。Dialog分为两个属性:body和footer，footer需要具名为footer的slot。title属性用于定义标题，它是可选的，默认值为空。最后，本例还展示了before-close的用法。 代码如下所示: <el-button type="text" @click="dialogVisible = true"&gt
element-plus-自定义Dialog样式
最新发布
缘如风的博客
09-25 3476
element-plus-自定义Dialog样式
【vue&elementui】自定义样式如el-dialog等、修改源码等
记录
05-29 1521
【vue&elementui】使用中遇到的问题。
Element组件浅尝辄止6：Dialog 对话框组件
渣渣砖
08-27 2217
Dialog 对话框组件：在保留当前页面状态的情况下，告知用户并承载相关操作。 大白话就是弹窗组件，日常开发中比较常见
element的Dialog的二次封装
ddx2019的博客
09-30 3672
公共的 <template> <div> <el-dialog class="comn_dialog" :title="dialogTitle" :visible.sync="visible" width="415px" top="23vh" > <slot> <p>弹窗内容</p> </slot>
el-dialog嵌套组件使用，组件内容超出高度
青春不打烊的博客
06-11 4293
第一种解决方式： 定义样式 .abow_dialog { display: flex; justify-content: center; align-items: Center; overflow: hidden; .el-dialog { margin: 0 auto !important; height: 90%; overflow: hidden; .el-dialog__body {
二次封装el-dialog组件，自定义组件应用v-model的实践
qq_41885295的博客
12-21 3353
我们在使用element-ui的时候，如果一个弹窗中的内容很多、复用率高，那么我们经常会把这个弹窗封装成一个组件
Vue手脚架
yuxiazu的博客
07-26 340
/span>（games数据在Category组件中，但使用数据所遍历出来的结构由App组件决定）2.浏览器的历史记录有两种写入方式分别为```push```和```replace```，```push```是追加历史记录，```replace```是替换当前记录。路由跳转时候默认为```push```3.组件中修改vuex中的数据```$store.dispatch('action中的方法名',数据)```或```$store.commit('mutations中的方法名',数据)```...
如何让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、付费专栏及课程。

余额充值