vue封装修改后的modal对话框

vue封装修改后的modal对话框

微信公众号：前端程序猿之路
关注可了解更多的前端知识，反馈问题或建议，请公众号留言。
如果你觉得公众号内容对你有帮助，欢迎关注并转载

iview里面Modal对话框有两种，一种是普通对话框，如下图：

另一种是消息对话框，包括消息对话框、成功对话框、警告对话框、错误对话框、确认对话框，这几种对话框根据消息的类型来展示左上角的图标显示，如下图是消息对话框：

很明显的可以看出，第一种和第二种对话框样式完全不同，普通的对话框并没有左上角的图标，在开发过程中，发现当第二种对话框需要连续显示两次的时候，可能会出现第二次不显示的情况，但是第一种没有这种问题，所以项目中采用了第一种对话框
但是随后又出现了另外一种问题，就是需求中对话框样式需要跟第二种一样，也包括右上角的图标展示，所以我就对iview里面的第一种对话框进行了改造，改造之后的对话框如下图：(haha,是不是跟第二种对话框一模一样呢)

代码如下：
modal

            
            

                

                    

                        
                    
                    
{{modal.title || '提示信息'}}
                
                

            
        

script

style

欢迎关注公众号，有你想要的前端知识：