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

前期工作

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

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

时间显示

要想在页面上进行时间显示。首先需要知道这个倒计时组件是如何保存时间的。翻阅文档得知,保存在组件中的时间是以 timeObj 的形式进行存储(timeObj 的完整格式见下)。对于需求来说,我们只需要其中的 timeObj.htimeObj.mtimeObj.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 自定义组件封装实录——基于现有控件的二次封装(以计时器为例)的更多相关文章

  1. Android 自定义View 三板斧之一——继承现有控件

    通常情况下,Android实现自定义控件无非三种方式. Ⅰ.继承现有控件,对其控件的功能进行拓展. Ⅱ.将现有控件进行组合,实现功能更加强大控件. Ⅲ.重写View实现全新的控件 本文重点讨论继承现有 ...

  2. 对百度WebUploader开源上传控件的二次封装,精简前端代码(两句代码搞定上传)

    前言 首先声明一下,我这个是对WebUploader开源上传控件的二次封装,底层还是WebUploader实现的,只是为了更简洁的使用他而已. 下面先介绍一下WebUploader 简介: WebUp ...

  3. 基于vue.js实现远程请求json的select控件

    基本思路 前端把需要的参数类型编码传到后台,后台返回相应的参数列表json,前端利用vue渲染select控件 具体实现 前端代码 <select v-model="template. ...

  4. vue.js自定义组件directives

    自定义指令:以v开头,如:v-mybind. <input v-mybind /> directives:{ mybind:{ bind:function (el) { el.value ...

  5. Vue.js自定义指令的用法与实例

    市面上大多数关于Vue.js自定义指令的文章都在讲语法,很少讲实际的应用场景和用例,以致于即便明白了怎么写,也不知道怎么用.本文不讲语法,就讲自定义指令的用法. 自定义指令是用来操作DOM的.尽管Vu ...

  6. vue中自定义组件(插件)

    vue中自定义组件(插件) 原创 2017年01月04日 22:46:43 标签: 插件 在vue项目中,可以自定义组件像vue-resource一样使用Vue.use()方法来使用,具体实现方法: ...

  7. 【Vue课堂】Vue.js 父子组件之间通信的十种方式

    这篇文章介绍了Vue.js 父子组件之间通信的十种方式,不管是初学者还是已经在用 Vue 的开发者都会有所收获.无可否认,现在无论大厂还是小厂都已经用上了 Vue.js 框架,简单易上手不说,教程详尽 ...

  8. Vue.js多重组件嵌套

    Vue.js多重组件嵌套 Vue.js中提供了非常棒的组件化思想,组件提高了代码的复用性.今天我们来实现一个形如 <app> <app-header></app-head ...

  9. 【Vue.js实战案例】- Vue.js递归组件实现组织架构树和选人功能

    大家好!先上图看看本次案例的整体效果. 浪奔,浪流,万里涛涛江水永不休.如果在jq时代来实这个功能简直有些噩梦了,但是自从前端思想发展到现在的以MVVM为主流的大背景下,来实现一个这样繁杂的功能简直不 ...

随机推荐

  1. Java内功心法,创建型设计模式包括哪些

    1. 单例(Singleton) Intent 确保一个类只有一个实例,并提供该实例的全局访问点. Class Diagram 使用一个私有构造函数.一个私有静态变量以及一个公有静态函数来实现. 私有 ...

  2. mask-rcnn解读(二):clip_boxes_graph()

    此函数是利用deltas对box修正,我并没有详细说明,若有问题,欢迎留言交流: def clip_boxes_graph(boxes, window): """ box ...

  3. Eureka重要对象简介

    在进行分析EurekaClient和EurekaServer之间通信的源码之前,我们首先需要熟悉一下几个实体类 InstanceInfo 这个类代表着EurekaClient实例,客户端向服务端请求注 ...

  4. nginx配置多个TLS证书,以及TLS SNI简介

    背景 原来申请的正式域名备案通过,TLS证书也申请了.之前使用的临时域名和证书作为测试环境使用.于是要在单个ECS主机上配置nginx多个证书和多个域名. 实践 nginx部署多个TLS证书很简单,在 ...

  5. Unity Ioc 依赖倒置及Untity AOP被动拦截/自动拦截

    各位博友金安,首先声明这是一篇转载的博客,原文链接:https://www.cnblogs.com/scottpei/archive/2013/01/08/2851087.html 十年河东,十年河西 ...

  6. 基础系列(1)-- html

    (随笔杂谈,自己做的笔记) 网页的组成 结构  ------  xhtml,xml 表现  ------  css 行为  ------  bom,dom,ECMAScript html5结构 < ...

  7. JVM问题排查工具:Serviceability-Agent介绍

    本文首发于微信公众号:javaadu 简单介绍 构建高性能的Java应用过程中,必然会遇到各种各样的问题,像CPU飙高.内存泄漏.应用奔溃,以及其他疑难杂症,这时可以使用Serviceability ...

  8. spring data jpa使用详解

    https://blog.csdn.net/liuchuanhong1/article/details/52042477 使用Spring data JPA开发已经有一段时间了,这期间学习了一些东西, ...

  9. Python学习日记(四十一) Mysql数据库篇 九

    前言 索引的主要作用是起到约束和加速查找,ORM框架(sqlalchemy)是用类和对象对数据库进行操作 索引的种类 按种类去分 1.普通索引:能够加速查找 2.主键索引:能够加速查找.不能为空.不能 ...

  10. AI-图像基础知识-02

    目录 图像坐标系 图像数字化 图像坐标系     在前面的数据标注文章中讲述如何进行标注,而标注后会保留4个坐标点,那么这些坐标点如何表示在图片中的位置?要表示一个点或图形的位置,就需要涉及到坐标系的 ...