首先是背景,一个简单的答题web app,想加入一个倒计时功能,每当打开新的一题的时候重新从10倒计时到0,如果倒计时到0了还没有做出选择,将看做放弃选择,进入下一题。
因为我要实现的功能是10s倒计时并且切换到下一页,因为之前写法的问题,我切换去下一页路由并没有改变,只是引用了一个数组中的不同的index。
我最开始怕麻烦引入了vue2-countdown组件,直接npm安装就可以了。但是这个组件因为很久没有维修了出了点问题。我们需要自己更改一下。
首先是视图部分作者注释掉了一些显示,我根据我自己的需要改了一下,把天和小时注释掉了。并且给最后需要显示的增加了class方便设置水平居中。
<template>
<div>
<p v-if="msTime.show">
<span v-if="tipShow" class="test2">{
{
tipText}}:</span>
<span v-if="!tipShow">{
{
tipTextEnd}}</span>
<span v-if="msTime.day>0"><span>{
{