Typescript,Vue,Element-UI 封装通用组件Modal

刚开始准备用vuex传参封装  最后还是选择用回调传参。

封装Modal之前需要先想好Modal的需求参数有哪些

参数：

（1）控制Modal显示隐藏的参数 

 public show :boolean = false;

（2）Modal的标题，各处调用时都不一样

 public title :string = "";

（3）Modal中内容区域的Vue组件

 public component : string | null = ""

（4）Modal中子组件需要传入的props

public props : any = null

（4）Modal的宽度（高度不定义）

 public width : string = ""

（5）Modal关闭回调

public callback : any = null

方法：

（1）打开Modal（传入各项参数）

（2）关闭Modal(这里传入index来确认是否调用回调函数)

（3）点击确认按钮

（4）销毁Modal中的内容

主体内容：

别忘了调用的组件需要引入：

声明：

 

开始调用：

成功事例：

源码：

这是写项目时随手写在csdn的，可能不够详细，请见谅