elementUI框架弹窗bug之按钮的定位

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图示也没有留存。

上文如有问题欢迎各位批评指正，谢谢。