Vue.js 自定义组件封装实录——基于现有控件的二次封装(以计时器为例)
Posted downstream-1998
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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: 刘忠燏 (seLiuZhongyu@outlook.com)
-->
<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 的事件模型上了解得还不够深入,在之后的工作中我还需要在这方面继续深入学习。
以上是关于Vue.js 自定义组件封装实录——基于现有控件的二次封装(以计时器为例)的主要内容,如果未能解决你的问题,请参考以下文章