VueJS组件库爬坑记 (4) - 基于官方文档制作模态框

开篇序

在家园工作室已经有半年之久了,在这期间,我学会了很多实用的技能。曾经认为很难驾驭的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进行美化,添加一个关闭按钮等等。

最终效果:

将最新的文章发送到你的邮箱

展示评论