elementUI框架dialog的bug之按钮的定位
Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库,是一款网站快速成型工具。在开发中比较容易上手,安装及引入使用在这里我不多叙述,具体可以参考官方文档:elementUI官方网站
在本文,我要说的是在之前的开发过程中发现的一个bug:
bug描述:elementUI在弹出表单(或者表格)的时候,点击按钮弹出dialog弹出框的时候,底部的按钮布局会飞到顶部,刷新页面可能才会解决这个bug。
bug思考:之前的项目一直没有遇到过类似的问题,是因为引入了别的样式库导致了样式覆盖重写吗?
bug解决方式:我在元素审查中一级一级拨开找,终于发现 elementUI 定义的dialog的底部footer是定位在整个dialog弹窗的底部,用的是top值实现了定位,所以我猜测可能是dialog的内容还未全部动态加载完成,它内部的footer就已经渲染样式定位在了top值固定的地方,而后来内容加载完成,看起来就像是footer的按钮全部飞到了顶部标题栏的地方。
bug解决:找到了问题所在,解决就好解决了:在行内设置定位是bottom距底部定位就好:
<div slot="footer" class="dialog-footer" style="bottom: 70px">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
</div>
注意: 这个bottom的值可以根据个人需求改变,在我的项目中70px是适用的。
距项目时间稍远,70px是我赋的值,底部高度是否为70px我不太能确定了,具体的bug图示也没有留存。
上文如有问题欢迎各位批评指正,谢谢。