element-ui 固定弹窗底部的按钮

最新推荐文章于 2024-07-19 11:00:34 发布
最新推荐文章于 2024-07-19 11:00:34 发布
阅读量6.7k 收藏 2
点赞数
文章标签： ui elementui 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33769914/article/details/122950195
版权
本文介绍如何在Element-UI的弹窗中实现底部操作按钮固定，即使内容区域滚动，按钮始终位于视口底部。关键点包括在`el-dialog`上设置`v-model`以及在底部按钮上添加`slot="footer"`属性。
摘要由CSDN通过智能技术生成

想要的效果。内容超出出现滚动条。地步按钮固定不变

需要注意两点

1.el-dialog 上面写v-model

2.下面的按钮上加上slot="footer"

<el-dialog title="收货地址" v-model="dialogFormVisible" :visible.sync="dialogFormVisible">

<el-form :model="form">

<el-form-item label="活动名称" :label-width="formLabelWidth">

<el-input v-model="form.name" autocomplete="off"></el-input>

</el-form-item>

<el-form-item label="活动区域" :label-width="formLabelWidth">

<el-select v-model="form.region" placeholder="请选择活动区域">

<el-option label="区域一" value="shanghai">

最低0.47元/天 解锁文章
肖肖肖丽珠
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue中实现element-ui dialog的弹窗拖拽+水平方向伸缩
一点一滴
03-29 2万+
import Vue from "vue"; // v-dialogDrag: 弹窗拖拽+水平方向伸缩 /* * 使用方法 * 将以下代码复制到一个js文件中，然后在入口文件main.js中import引入即可； * 给elementUI的dialog上加上 v-dialogDrag 指令就可以实现弹窗的全屏和拉伸了。 * 给dialog设置 :close-on-click-mo...
解决el-dialog弹出时，主页（滚动条）左右伸缩抖动问题
lianganton的专栏
04-25 924
问题描述：当主页列表有横向滚动条时，查看行详情，弹出el-dialog时，会发现弹出框弹出时，页面会抖动，直接效果就是页面右侧会发生变化，缩小了几个像素点；体验感不是很好，另一个就是会影响到页面的布局；important；不太可取，虽然可以解决这个问题，但是影响了页面的布局效果；看了一下，应该是页面存在滚动条，弹出在出现时，会对页面的滚动条进行处理，给body增加额外的样式类；可以找到样式类重写；最直接的方法参考 2；2.在main.js中，找到引入element的地方，举个例子。
实现el-dialog 弹窗底部按钮悬浮功能
最新发布
weixin_42987138的博客
07-19 244
1.为了防止弹窗不跟随最外层元素上下滑动，最外边div给个height高度，height的高度 + 弹窗的top高度 = 100，修改margin：0 auto 0参数。2.下方按钮悬浮，先让按钮脱离文档流，给absolute，父级需给relative。3.子级元素的需要给100%
详解为element-ui的Select和Cascader添加弹层底部操作按钮
10-15
主要介绍了详解为element-ui的Select和Cascader添加弹层底部操作按钮，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Element-diag中遮罩
weixin_34080903的博客
12-12 342
<el-dialog title="收货地址" :visible.sync="dialogFormVisible" append-to-body> <el-form :model="form"> <el-form-item label="活动名称" :label-width="formLabelWidth"> <el-input v-model=...
在element-ui中的dialog中固定底部操作按钮
热门推荐
暴躁鹅的博客
12-03 1万+
未来了在dialog里固定底部按钮 我刚开始用 position:flxed 但是十分效果不佳用relative和absolute也达不到想要的效果 最终解决方法： position:sticky 黏性定位 就解决了问题 ...
【关于Element UI中el-autocomplete组件】一、el-autocomplete组件添加底部固定按钮
XujiRe的博客
06-22 2726
Element UI饿了么el-autocomplete组件下拉建议值框添加底部固定按钮:popper-append-to-body使用
elementUI框架弹窗bug之按钮的定位
weixin_45738653的博客
06-20 2384
elementUI框架dialog的bug之按钮的定位 Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库，是一款网站快速成型工具。在开发中比较容易上手，安装及引入使用在这里我不多叙述，具体可以参考官方文档：elementUI官方网站 在本文，我要说的是在之前的开发过程中发现的一个bug： bug描述：elementUI在弹出表单（或者表格）的时候，点击按钮弹出dialog弹出框的时候，底部的按钮布局会飞到顶部，刷新页面可能才会解决这个bug。 bug思考：之前
element-ui中dialog弹窗关闭按钮失效的解决
01-18
如下所示： 修改库存 visible.sync=kcDialog close=kcDialog> ... 加一个@close可以是一个方法或者直接操作kcDialog为false 补充知识：webpack外部扩展，依赖前置 引入了外部js ... ... integrity=sha256-slogkvB1K3...
如何为element-ui的Select和Cascader添加弹层底部操作按钮
12-28
如下图这样把操作按钮放在 select 弹层底部是一种挺常见的设计方式 但是很遗憾 element-ui 没有给我们提供这个插槽，我们想实现这个功能只能重写组件或者等官方更新吗，答案当然是否定的！ 花了一点时间通过一个函数实现这个功能，支持 el-select 和 el-cascader , 效果点击预览 其实逻辑很简单，把下面这段 html 插入到指定位置就行了 <li class=el-cascader-nod
element-ui tooltip修改背景颜色和箭头颜色的实现
10-15
在前端开发中，Element UI 是一个非常流行的 Vue.js 组件库，它提供了丰富的 UI 组件，如表格、按钮、提示等。在实际项目中，为了满足个性化需求，我们经常需要自定义组件的样式，比如修改 Tooltip（提示框）的背景...
element-ui中dialog封装模板
05-11
-- 弹窗底部按钮 --> <span class="dialog-footer"> <el-button @click="dialogVisible = false">取 消</el-button> <el-button type="primary" @click="handleConfirm">确 定</el-button> </el-dialog> ...
Element-ui滚动条el-scrollbar始终保持在底部
DDDInJava
01-04 5853
el-scrollbar是elementui隐藏的一个组件使用方法如下： <el-scrollbar style="height: calc(100vh - 200px);" ref="myScrollbar"> <p v-for="(message, index) in messages" :key="index"><span class="nick"> {{message.nick}} </span>:<br/>{{me
Vue + Element 页脚固定底部
图南的博客
05-24 1740
在开发 Web 应用时，经常会出现需要将页面的页脚固定在页面底部的需求。本文将介绍如何使用 Vue 和 Element UI 实现这一功能。在我们的项目开发过程中，遇到了页脚不固定在底部的问题：比如以下界面： 以 VUE + Element 为例，Element有现成的布局容器 Container，只需要在最外层加上CSS属性 即可。相关代码： 注意，在 中，我们依然使用了 来保证页面内容至少占满整个视口高度。而 组件则会自动吸附到 的底部。至此，我们已经成功地实现了 Vue + Element
elementui dialogfooter固定在底部（粘性定位）
HUANGRUI的博客
07-31 6157
css粘性定位，footer固定在底部
Vue组件置底方法，ElementPlus布局
m0_58031031的博客
03-02 1011
组件里分成了main和footer两块，但是想要将两个按钮置底在容器底部遇到了困难。在开发网页时使用了elementplus的el-container组件。如下图所示，在网页开发者工具可见两个按钮与左侧的图片。
解决element 弹窗屏幕变灰的问题（双层弹窗）（遮罩层问题）
weixin_49376462的博客
07-04 7556
新增按钮弹窗，新增按钮里需要选择部门，又一个弹窗，此时点第二个弹窗的时候页面会灰。model-append-to-body属性是是否让遮罩层插入body上面，如果为false，则遮罩层是在父元素身上的。
如何让el-form超出高度出现滚动条
05-27
要让 `el-form` 超出高度出现滚动条，可以将其外层包裹在一个固定高度的容器中，然后在容器中设置 `overflow: auto` 样式，这样超出容器高度的内容就会出现滚动条。 示例代码如下： ```html <div style="height: 300px; overflow: auto;"> <el-form> <!-- el-form 的内容 --> </el-form> </div> ``` 这样就可以让 `el-form` 超出高度出现滚动条了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值