Vue.js 自定义组件封装实录——基于现有控件的二次封装（以计时器为例）

在本人着手开发一个考试系统的过程中，出现了如下一个需求：制作一个倒计时的控件显示在试卷页面上。本文所记录的就是这样的一个过程。

前期工作

对于这个需求，自然我想到的是有没有现成的组件可以直接使用（本着不重复发明轮子的原则）。于是我就在 GitHub 上找寻。确实找到了不少，但是与需求之间的差距还比较大。从零开始写又不太现实（时间摆在那里，加之自己的前端也是刚学，还没有从零开始手撸一个控件的能力），所以在已有组件的基础上进行二次封装便成了一个比较可行的方法（几乎也是唯一解）。遂在 npm 上以 countdown 为关键词搜索，最后找到了 Vue Awesome Countdown 这个组件。这个组件几乎满足了需求，只是它还没有像样的展示形式。所以针对它的二次封装主要就是围绕这个展开。

对于考试倒计时的组件，我希望它有两个功能：在页面上展示剩余时间、在考试结束时自动交卷。接下来的内容就围绕这个展开。

时间显示

要想在页面上进行时间显示。首先需要知道这个倒计时组件是如何保存时间的。翻阅文档得知，保存在组件中的时间是以 timeObj 的形式进行存储（timeObj 的完整格式见下）。对于需求来说，我们只需要其中的 timeObj.h、timeObj.m、timeObj.s 即可。

{
    "endTime": 1542634411361,
    "speed": 1000,
    "leftTime": 97019,
    "d": "0",
    "h": "00",
    "m": "01",
    "s": "37",
    "ms": "019",
    "org": {
        "d": 0.001134247685185185,
        "h": 0.02722194444444444,
        "m": 1.6333166666666665,
        "s": 37.998999999999995,
        "ms": 19
    },
    "ceil": {
        "d": 1,
        "h": 1,
        "m": 2,
        "s": 98
    }
}

倒计时的时长，则可以通过后端传过来的考试记录信息进行推算，然后作为一个参数传入，结合网站提供的示例，很快就写出了以下代码：

<template>
  <div id="timer-view">
    <p class="title">距离考试结束还有</p>
    <countdown :end-time="new Date().getTime() + remainingTimes">
      <div class="timer" slot="process" slot-scope="{ timeObj }">
        {{ `${timeObj.h}:${timeObj.m}:${timeObj.s}` }}
      </div>
    </countdown>
  </div>
</template>

<script>
export default {
  name: 'timer',
  props: {
    remainingTimes: Number
  }
}
</script>

<style scoped>
#timer-view {
  margin: 15px;
  border: solid 1px;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}
.title {
  text-align: center;
}
.timer {
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 50px;
  color: red;
  font-weight: bold;
}
</style>

计时结束事件

显示的问题解决后，下面要处理的是计时结束后的自动交卷。官方文档中提到了该组件有如下四个事件可以处理：

Event	Explain	Parameters
start	Functions executed at the beginning of countdown	`vm`
process	Function executed when countdown is performed	`vm`
stop	Function executed when countdown stops	`vm`
finish	Function executed when countdown finished	`vm`

不难看出，对于需求来说，可以响应它的 finish 事件完成这一功能。这里限于本人对 Vue 的事件响应了解还不是很透彻，这里采用了一个比较麻烦的手法处理该问题（将响应 finish事件的函数作为参数传入组件，然后对应的部分直接写 @finish="传入的参数"）。之后对 Vue 的理解更加深入后会改回事件响应的那套模型。

<!--
    计时器组件
    Author: 刘忠燏 ([email protected])
  -->
<template>
  <div id="timer-view">
    <p class="title">距离考试结束还有</p>
    <countdown :end-time="new Date().getTime() + remainingTimes" @finish="endCallback">
      <div class="timer" slot="process" slot-scope="{ timeObj }">
        {{ `${timeObj.h}:${timeObj.m}:${timeObj.s}` }}
      </div>
    </countdown>
  </div>
</template>

<script>
export default {
  name: 'timer',
  props: {
    remainingTimes: Number,
    endCallback: Function
  }
}
</script>

<style scoped>
#timer-view {
  margin: 15px;
  border: solid 1px;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}
.title {
  text-align: center;
}
.timer {
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 50px;
  color: red;
  font-weight: bold;
}
</style>

以上就是计时器的完整代码，要使用它，只要传入合适的参数给该组件即可：

<template>
  <div>
    <timer :remaining-times="remainingTimes" :end-callback="onFinished"></timer>
  </div>
</template>

<script>
import Timer from '@/components/Timer'

export default {
  name: 'paper-view',
  components: {
    'timer': Timer
  },
  methods: {
    onFinished () {
      // ...
    },
  },
  computed: {
    remainingTimes () {
      // ...
    }
  }
}
</script>

<style>

</style>

总结

通过这次的组件封装，我对 Vue 的组件有了进一步的认识，也暴露出我在 Vue 的事件模型上了解得还不够深入，在之后的工作中我还需要在这方面继续深入学习。

lblog_wc3dz06y