开篇序

在家园工作室已经有半年之久了，在这期间，我学会了很多实用的技能。曾经认为很难驾驭的Vue.js，到现在已经能够很熟练地用它开发大大小小的项目。

不久之前，我加入了云家园项目组，开始正式参与云家园项目的研发与维护。在此期间，我浏览了一遍云家园的前端代码，发现整体的架构还是相当复杂、庞大，并且过于繁冗。我参考了云家园项目中Bootstrap的引入方式与使用方式，发现项目中基本没有出现可复用组件（当然，也有一部分的组件是几位先辈封装的），但是Vue组件化的概念并未贯彻整个项目的代码中。于是我萌生出想要开发一个属于家园工作室自己的可复用的UI组件库的想法。这个想法提出来，有两位学长表示他们早就想做这个，然后用这个UI组件库去重构云家园的前端代码。所以我们三人在3天前的3月21日开启了制作一套基于Vue.js 2.0的UI组件库之旅。

从这片文章开始，我将会记录我们在开发这套UI组件库中遇到的种种困难与解决这些问题的方案。实践性的内容将占到绝大部分，也有少部分偏理论的内容。

我们可以将这个系列的博客理解为从零开始开发Vue.js组件库到其初具雏形再到其羽翼丰满的全过程的记录，一颗牙当作经验的积累。

简介

这片文章主要记录了基于Vue.js官方文档中关于模式组件而开发的一个模态框组件的过程。

开发过程

代码分析

根据官方文档，一个受推荐的模式组件的代码应当形如下面：

进一步观察发现，官方提供Demo在技术上具有如下特性：

• 采用v-if控制模态框的显示与隐藏，而不是国内某些UI组件库普遍采用的v-model
• 采用<transition>控制模态框的过渡动效
• 采用Div编写模式组件，而不是常用的iframe
• 组件内采用$emit回传动作信息（关闭模态框），避免无法回传的尴尬

自己实现

修改动画

针对过渡动画进行修改，提高用户体验：

CSS

.modal-enter {
  opacity: 0;
}

.modal-leave-active {
  opacity: 0;
}

.modal-enter .modal-container,
.modal-leave-active .modal-container {
  transform: translate3d(0, -100%, 0);
}

修改之后即可达到与Bootstrap中的模态框相似的过渡效果。

使点击遮罩后能关闭模态框

在组件的Wrapper中添加如下代码：

<div class="modal-wrapper" @click.self="$emit('close')">

使用@click.self的目的是避免事件冒泡传递，即点击模态框时事件不会传到遮罩上从而导致模态框关闭。

其他修改

主要是针对UI进行美化，添加一个关闭按钮等等。

最终效果：