如何提高vue element弹窗的复用性

Question

现在在做项目，使用element-ui的框架做后台管理系统，会用到很多的dialog弹窗，但是每次要写一个弹窗都要在页面上写一大堆html，导致整个页面很长，不容易维护，有什么好的办法吗？可以写到mixin里面吗？

Answer 1

你的弹窗是只是用来显示提示消息还是需要用户填写表单？如果只是提示消息，可以使用 $msgbox，只需要输入一个字段的也可以使用 $prompt。
参见：http://element.eleme.io/#/zh-...。

Answer 2

如果大概样式相同的话可以通过v-if进行显隐，通过变量判断提交的是那个需求，但是还是一个弹窗对应一个需求好点，推荐layer弹窗，挺好用的

Answer 3

alert有全局注册的，你看下

Answer 4

我通常是将这个弹框作为一个公共函数，每次需要的时候就去调用它，把随时变化的信息作为参数，这样很方便，

Answer 5

如果你觉得复用性很强(就是代码差不多，基本复制粘贴)，阔以封装好一个组件，配合vuex来全局显示。

Answer 6

页面很长可以拆分组件啊，问题的关键不是dialog，而是你怎样去维护你的代码。你大可以把你同样的表单单独封装成一个组件，在不同的dialog里引用它，共用的函数也可以用mixin封装起来，代码是灵活的，只要满足你的需求就好。