Vue组件如何实现卡片动画倒计时，长尾词示例？

本文共计2425个文字，预计阅读时间需要10分钟。

目录+前言+需求拆解+组件设计思路+整体开发+animate-clock.vue+animate-card+项目中使用+后续+前言+最近有朋友在做投资项目的，里面有一个用到倒计时的组件，还想加个动画效果。CV大法好！

目录

• 前言
• 需求拆解
• 组件设计思路
• 具体开发
• animate-clock.vue
• animate-card
• 项目中使用
• 后记

前言

最近有朋友在做投票的项目，里面有用到一个倒计时的组件，还想要个动画效果。cv大法浸染多年的我，首先想到的是直接找个现有的组件。

通过一通搜索，看上的只有一个 vue2-flip-countdown，但是当我要修改大小和颜色的时候发现改不了，从而直接把源码拉到项目里面，改起来也挺麻烦。

而且，在搜索大法运行几个周天以后，其实心理已经有了一个倒计时开发整体思路，便决定自己封装一个倒计时出来，最终实现效果如下：

需求拆解

• 开发一个开箱即用的组件，实现倒计时的效果，显示模式为 01日01时01分01秒。
• 以终止时间为入参，计算倒计时显示的各个数据。
• 方便的控制显示的文案，以及主题颜色，大小。