Vue.js弹出模态框组件开发的示例代码

在开发项目的过程中，经常会需要开发一些弹出框效果，但原生的alert和confirm往往都无法满足项目的要求。目前只是一个仅满足当前项目需求的初始版本，因为这个项目比较简单，也就没有保留很多的扩展功能。模态框结构分为：头部标题、提示内容和操作区域。同时一般还会有一个遮罩层。此次需求比较简单，也无需图标等内容，所以结构上写的也比较简单。实际开发中可根据需求对结构进行相应的调整。使用promise对象主要是为了异步调用，因为很多时候我们使用模态框时需要根据返回结果再进行下一步处理。如果需要扩展的话，可以通过props的dialogOption传递更多的字段，在computed中进行判断，比如增加一个字段isShowCancelButton可以控制取消按钮是否显示。源码地址实现效果