vue封装一个简单的modal对话框

1、在conpmonents新建一个Modal.vue

 2、在main.js注册成全局组件

// 全局可用的组件
import Modal from './components/Modal'
Vue.component('lx-modal', Modal)

3、在app.vue中使用组件 

通过外层的div控制组件的显示隐藏 

 4、编写Modal的代码逻辑

在modal.vue中，我们在props中接受四个参数，title：标题，width：宽度， height：高度，top：距离顶部的高度，不传则是默认的值；并提供了两个具名插槽，header和footer，以及一个默认插槽slot显示里面的内容；并添加了三个自定义事件控制modal的显示和隐藏；v-if默认展示组件

注意一下：关于字体图标使用和用到的button组件、message提示组件可以看我之前发的封装button组件和message组件那个作品。message提示组件讲到了字体的引用以及封装，这几个自己封装的组件一起连着使用了

message组件及字体引入：https://blog.csdn.net/qq_55491577/article/details/136044309?spm=1001.2014.3001.5502

button组件 ：

https://blog.csdn.net/qq_55491577/article/details/136029304?spm=1001.2014.3001.5502

5、来到App.vue

传递一些需要的参数，宽高就用默认的 代码如下：

在上面使用了header那个具名插槽 和默认插槽 更改了插槽中原本的内容：关于插槽的知识点

效果如下：

点击打开modal那个按钮弹出对话框

点击右上角的xx, 取消、确定都会把对话框隐藏，并使用message组件提示用户 ，可以再这三个事件写自己的逻辑，比如点击确定发起请求等；