vue+element 设置弹窗_封装Vue Element的dialog弹窗组件

我本没有想着说要封装一个弹窗组件，但有同行的朋友在问我，而且弹窗组件也确实在项目开发中用的比较多。思前想后，又本着样式统一且修改起来方便的原则，还是再为大家分享一个我所封装的弹窗组件吧。

其实，并不是所有封装组件的方式都是一成不变的，你可以采用函数式组件这种能提高性能的方式，也可以使用带有状态和生命周期的普通组件的封装方式。但像dialog这种包含很多点击事件如确定或提交事件、取消或重置事件、右上角那个小叉叉的关闭事件等，又有可能包含嵌套其他组件如表格组件、表单组件、树形组件、穿梭框组件等的公共组件，其成分略微复杂，功能不太单一，你若要采用函数式组件的方式来封装也不是不可以，只是可能xue微要麻烦一些，我自己建议是不采用这种封装方式，就采用普通的封装方式就好。

至于普通组件的封装方式，我想大家平时在开发的过程中对所接触的普通组件即带有状态和生命周期，也能快乐地使用this关键词的组件已经是非常熟悉了，所以这种封装方式我就不会再做过多的介绍了。以下是具体的实现过程。

照例还是想来张效果图：

1、所封装的弹窗组件dialog.vue

top="20vh"

class="el-dialog-cus"

v-bind="{...$attrs, ...{title, width, center}}"

:visible="visible"

:before-close="beClose"

append-to-body

>

{ {btnTxt[0]}}

{