Modal弹框在Web应用或者Web页面上非常常见，很多时候在不同的项目都会重写这样的一个Modal弹框。为了能偷懒，思考了一下，能不能写一个组件，比如说使用Vue创建一个组件，一个Modal组件，让其能在各个Web页面或者应用上使用。在这篇文章中，学习一下如何使用transition和slots来创建可重用的Modal组件。

Modal构成

Modal对于大家来说是很常见的一个东东，在Dribbble上搜索modal可以看到很多非常优秀的Modal设计。比如下面这个：

一般对于Modal弹框会有五个部分构成：

• Modal弹框的蒙层，一般是黑色半透明，全屏显示
• Modal弹框头部
• Modal弹框主体
• Modal弹框脚部
• Modal弹框关闭按钮

这是一个Modal弹框最常见的五个部分，当然不是所有的Modal弹框都会有这些东西。对于以前我们写一个Modal弹框会这样来写：

<div class="modal-backdrop">
    <div class="modal">
        <div class="modal-header">
            <div class="modal-close"></div>
        </div>
        <div class="modal-body"></div>
        <div class="modal-footer"></div>
    </div>
</div>

很多时候在modal-footer中也会带有关闭弹框的动作按钮，需要具体场景具体分析。

使用Vue创建Modal组件

使用Vue-cli构建项目

在这里我使用Vue-cli来构建Vue的项目，对于Vue-cli在这里不做过多的阐述。通过：

vue init webpack vue-modal

然后一路按照命令提示执行下去。运行npm run dev，你会先看到一个这样的界面：

创建modal组件

找到项目中的src/components/目录，创建一个Modal.vue文件。有了这个组件文件之后，咱们先从组件的模板开始。需要定义出Modal组件常见的几个部位：

<template>
    <div class="modal-backdrop">
        <div class="modal">
            <slot name="header"></slot>

            <slot name="body"></slot>

            <slot name="footer"></slot>
        </div>
    </div>
</template>

注意，这里使用了Vue的slots。这样我们就可以通过props来提供Modal弹框的header、body和footer。因为使用slots可以有更多的灵活性。

使用slots使用我们可以很轻易地重用不同类型的弹框内容。可以在Modal弹框显示一个简单的文本，但是我们可能希望重用相同的Modal弹框来提交一个请求。虽然props一般情况下足够我们构建一个组件，但是通过props会要求我们使用v-html来渲染它。这样做一个不好的地方，很可能会受到XSS的攻击。

在这里，使用不同命名的slots，可以让我们在一个组件中使用多个slots。当定个一个指定的slots时，我们所识别的任何名称都将被呈现，而不是原来的slots。简单的理解，就把它看作是一个占位符。有点类似于input中的placeholder，如果不显式的给slots指定内容，它也可以有默认的内容。

由于所提供的内容将会替换<slot>标记，为了保证<slot>对应的区域有我们想要的类名，最好用一个容器将每个<slot>包裹起来。这个时候我们的模板变成这样：

<template>
    <div class="modal-backdrop">
        <div class="modal">
            <div class="modal-header">
                <slot name="header"></slot>
            </div>

            <div class="modal-body">
                <slot name="body"></slot>
            </div>

            <div class="modal-footer">
                <slot name="footer"></slot>
            </div>
        </div>
    </div>
</template>

给slots添加一点默认的值以及给容器设置一些初始的CSS样式，让其看起来像一个基本的Modal弹框：

<template>
    <div class="modal-backdrop">
        <div class="modal">
            <div class="modal-header">
                <slot name="header">
                <h2>这是Modal弹框的标题</h2>