vue-flip-down

安装

cnpm install vue-flip-down --save

或者

yarn add vue-flip-down

使用

import FlipDown from 'vue-flip-down';<FlipDown:endDate="1540212399971"  // 结束的时间，即倒计时会从当前时间一直到endDate停止，可以是一个日期对象，也可以是毫秒数@timeUp="func"            // 当倒计时走到0时会触发一次，表示时间到了:type="1"                 // 4-日时分秒，3-时分秒，2-分秒，1-秒:theme="1"                // 样式：1-合并，2-分离:timeUnit=[':',':',':']   // 时间单位，显示在空隙之间的文字，比如：['天','时','分','秒'] 或 [':',':',':']
/>

:theme=“1” 合并式

合并式的，每个不同的时间单位是合在一起的

:theme=“2” 分离式

分离式的，每个数字都是单独分开的

不用安装也可使用

直接把下标的内容拷贝到项目里直接用，就是个普通vue组件，就不用npm install，然后直接可以修改其样式

<!-- 翻页效果 倒计时组件 -->
<template><div :class="['vue-countdown-component', { theme2: theme !== 1 }, {ie: isIE}]"><template v-for="(item, index) in timeArray"><div :class="['time-box']":key="index"><!-- 底层基础div --><div class="base">{{ item }}<div class="base-b">{{ timeArrayT[index] }}</div></div><!-- 翻页动画div --><div :class="['face',{ anime: isAnimate[index] }]"@animationend="onAnimateEnd(index)">{{ timeArrayT[index] }}</div><div :class="['back',{ anime: isAnimate[index] }]">{{ item }}</div></div><!-- 文字 --><div class="time-unit":key="`unit-${index}`"v-if="isTimeUnitShow(index)">{{ setTimeUnit(index) }}</div></template></div>
</template><script>
export default {data() {return {isIE: false,timeArray:this.theme === 2? new Array(this.type * 2).fill("0"): new Array(this.type).fill("00"),timeArrayT:this.theme === 2? new Array(this.type * 2).fill("0"): new Array(this.type).fill("00"),isAnimate:this.theme === 2? new Array(this.type * 2).fill(false): new Array(this.type).fill(false)};},props: {endDate: { type: [Date, Number, String], default: 0 }, // 截止时间type: { type: [Number, String], default: 4 }, // 时间精度 4/3/2/1theme: { type: [Number, String], default: 1 },timeUnit: { type: Array, default: () => [] }},computed: {endTime() {if (this.endDate instanceof Date) {return this.endDate.getTime();}return Number(this.endDate) > 0 ? Number(this.endDate) : 0;},step() {return this.theme === 1 ? 1 : 2;},arr() {const length = this.timeArray.length;const step = this.step;const temp = [length - 1,length - step - 1,length - step * 2 - 1,length - step * 3 - 1];temp.length = this.type > 1 ? this.type : 1;return temp;}},watch: {timeArray(newV, oldV) {const diff = [];newV.forEach((value, index) => {if (value !== oldV[index]) {diff.push({ value, index });this.$set(this.isAnimate, index, true);}});setTimeout(() => {diff.forEach(item => {this.$set(this.timeArrayT, item.index, item.value);});}, 350);},endTime(newV) {if (newV > 0) {this.start();}}},mounted() {if (window.ActiveXObject ||"ActiveXObject" in window ||window.navigator.userAgent.indexOf("Edge") > -1) {this.isIE = true;}this.start(0);},beforeDestroy() {clearTimeout(this.timer);},methods: {// 开始倒计时start(step = 1000) {clearTimeout(this.timer);this.timer = setTimeout(() => {let t = this.endTime - new Date().getTime(); // 剩余的毫秒数t = t < 0 ? 0 : t;let day = 0; // 剩余的天let hour = 0; // 剩余的小时let min = 0; // 剩余的分钟let second = 0; // 剩余的秒const type = Number(this.type);if (type >= 4) {day = Math.floor(t / 86400000); // 剩余的天hour = Math.floor(t / 3600000 - day * 24); // 剩余的小时 已排除天min = Math.floor(t / 60000 - day * 1440 - hour * 60); // 剩余的分钟 已排除天和小时second = Math.floor(t / 1000 - day * 86400 - hour * 3600 - min * 60); // 剩余的秒} else if (type >= 3) {hour = Math.floor(t / 3600000); // 剩余的小时min = Math.floor(t / 60000 - hour * 60); // 剩余的分钟 已排小时second = Math.floor(t / 1000 - hour * 3600 - min * 60); // 剩余的秒} else if (type >= 2) {min = Math.floor(t / 60000); // 剩余的分钟second = Math.floor(t / 1000 - min * 60); // 剩余的秒} else {second = Math.floor(t / 1000); // 剩余的秒}let arr = [];if (Number(this.theme) === 1) {// 不分开type >= 4 && arr.push(String(day).padStart(2, "0"));type >= 3 && arr.push(String(hour).padStart(2, "0"));type >= 2 && arr.push(String(min).padStart(2, "0"));arr.push(String(second).padStart(2, "0"));} else {// 分开type >= 4 &&arr.push(...String(day).padStart(2, "0").split(""));type >= 3 &&arr.push(...String(hour).padStart(2, "0").split(""));type >= 2 &&arr.push(...String(min).padStart(2, "0").split(""));arr.push(...String(second).padStart(2, "0").split(""));}this.timeArray = arr;if (t > 0) {this.start();} else {this.$emit("timeUp");}}, step);},// 动画完毕后，去掉对应的class, 为下次动画做准备onAnimateEnd(index) {this.$set(this.isAnimate, index, false);},isTimeUnitShow(index) {if (this.arr.includes(index)) {if (index === this.timeArray.length - 1 && !this.timeUnit[3]) {return false;}return true;}return false;},setTimeUnit(index) {switch (index) {case this.timeArray.length - 1:return this.timeUnit[3] || ""; // 秒case this.timeArray.length - this.step - 1:return this.timeUnit[2] || ""; // 分case this.timeArray.length - this.step * 2 - 1:return this.timeUnit[1] || ""; // 时default:return this.timeUnit[0] || ""; // 天}}}
};
</script><style lang="less">
.vue-countdown-component {display: flex;@keyframes animate-filp-face {0% {transform: rotateX(-0.01deg);opacity: 1; // 改变opacity 为了QQ浏览器和safari(不支持z-index animate)}50% {opacity: 1;}51% {opacity: 0;}100% {transform: rotateX(-180deg);opacity: 0;}}@keyframes animate-filp-back {0% {transform: rotateX(180deg);}100% {transform: rotateX(-0.01deg);}}&.ie {// 为了ie和老版edge（不支持clip-path）.base {.base-b {clip: rect(15px, auto, auto, auto);}}.face {clip: rect(auto, auto, 15px, auto);}.back {clip: rect(15px, auto, auto, auto);}}&.theme2 {.time-box {min-width: 20px;& + .time-box {margin-left: 1px;}}}.time-unit {padding: 0 4px;color: #222;font-size: 14px;line-height: 30px;white-space: nowrap;}.time-box {position: relative;box-sizing: border-box;height: 30px;min-width: 28px;font-size: 14px;text-align: center;background-color: #6c96e8;perspective: 60px;border-radius: 3px;padding: 0 2px;color: #fff;line-height: 30px;&:before {content: "";position: absolute;background: #a7c7ff;width: 1px;height: 6px;top: 50%;left: -1px;margin-top: -3px;z-index: -1;}&:after {content: "";position: absolute;background: #a7c7ff;width: 1px;height: 6px;top: 50%;right: -1px;margin-top: -3px;z-index: -1;}& + .time-box {margin-left: 8px;}& > div {overflow: hidden;animation-timing-function: linear;animation-duration: 400ms;// 为了chrome，需要一个小的角度，否则字体渲染错位transform: rotateX(-0.01deg);border-radius: 3px;&.base {position: relative;.base-b {position: absolute;left: 0;bottom: 0;border-radius: 0 0 3px 3px;width: 100%;height: 100%;background-color: #709bf1; // a1比base浅一点点，为了模拟翻页的阴影效果// background-color: #0ff;clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);}}&.face {position: absolute;left: 0;top: 0;width: 100%;height: 100%;background-color: #6c96e8;// background-color: #f00;backface-visibility: visible;clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);z-index: 2;&.anime {animation-name: animate-filp-face;}}&.back {position: absolute;left: 0;top: 0;width: 100%;height: 100%;background-color: #709bf1; // b0和a1一致// background-color: #aa0;transform: rotateX(-180deg);backface-visibility: visible;clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);&.anime {animation-name: animate-filp-back;}}}}
}
</style>

说明

内部使用了setTimeout，当倒计时结束后，就会停止循环。但可以动态改变日期，倒计时又会被激活。
基于本地时间做对比
github地址：vue-flip-down

vue倒计时插件（vue-flip-down）相关推荐

vue 倒计时插件_Vue学习笔记-倒计时插件
安装 1.cnpm/npm npm install vue2-countdown --save 2.Git 下载源码 git clone https://github.com/cgygd/vue2-c ...
vue 倒计时插件_vue中实现倒计时组件与毫秒效果
时分秒倒计时组件 template {{ getHours1 }} {{ getHours2 }} : {{ getMinutes1 }} {{ getMinutes2 }} : {{ getSeco ...
安装vue浏览器插件-Vue.js devtools
一.进入github仓库:https://github.com/vuejs/devtools 可以下载zip包,也可以clone仓库.这里我下载的压缩包. 二.解压后,在终端进入文件夹路径. 解压后推 ...
vue日期倒计时插件
下载地址 vue-count-to.js是一款基于vue实现的日期倒计时插件,功能实现:传入两个日期,展示它们两个间隔时间的倒计时.支持天.时分秒.毫秒的展示形式,倒计时结束时触发结束时间,执行结束 ...
vue 画布插件_一个Vue.js插件，用于使用EaselJS控制HTML5画布
vue 画布插件 vue-easeljs (vue-easeljs) A Vue.js plugin to control an HTML5 canvas using EaselJS. 一个Vue.j ...
vue 在浏览器控制台怎么调试谷歌插件vue Devtools
vue 在浏览器控制台怎么调试谷歌插件vue Devtools 问题: vuejs里面的变量,怎么用浏览器的console查看? 例如,想在chrome里用console.log查看变量$data, ...
实用VUE 开发插件！！前端必备
element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI ...
[vue] 怎么在vue中使用插件？
[vue] 怎么在vue中使用插件? npm 安装然后再main.js 引入最后 vue.use(插件名) 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家 ...
VSCode 开发Vue必备插件
工欲善其事,必先利其器以下就是开发Vue必备插件: Vetur -- 语法高亮.智能感知.Emmet等包含格式化功能, Alt+Shift+F (格式化全文),Ctrl+K Ctrl+F(格式化选 ...
vue css load,vue css3loadding插件的开发以及npm包的发布管理
插件开发的话建议使用vue-gitment脚手架开发 vue init webpack-simple vue-gitment 如果提示执行cnpm install vue-cli -g 全局安装 c ...

vue倒计时插件（vue-flip-down）

vue-flip-down

安装

使用

不用安装也可使用

说明

vue倒计时插件（vue-flip-down）相关推荐

最新文章

热门文章