mdbVue 是 Vue 的一个 UI 框架。最近在使用的过程中遇到一个关于对话框的问题。
mdbVue 的对话框，在点击对话框以外的区域时，对话框会自动关闭：
如上图所示，除了点击 “x” 和 “close” 按钮，点击红色箭头的位置，对话框也关闭了。
客户提出，有时不小心碰到对话框以外的区域，对话框就关掉了，很不方便，能不能改成只有在点击 “x” 和 “close” 时才关闭。
这个属于框架本身的问题了，不着急，那么我们就来看看这个关闭是什么时候触发的：
如上所示，打开对话框的源码，发现这里有个 “@click.self="click"” ，找到 “away” :
原来这里派发了一个 “close” 事件，同时把组件实例本身作为参数传递出去了。
继续看：
如上所示，这是点击 “x” 派发的事件，也是 “close”，只不过这次没有参数。
那么我们就有思路了，可以根据参数的有无来决定窗口的关闭行为。
为了解决所有对话框的问题，我们来封装一个通用的组件，如下所示：
关于里面的技术点：“attrs”、“listeners”、“slot” 等，请读者自行查阅 Vue 的官方文档。
请看核心代码，上面的第 14 行，重写 “close” 方法，当有 modal 组件实例作为参数时，判断是点击对话框以外的区域，此时不再派发 “close” 事件，于是对话框就不再关闭了。
