From 8fb477ba22cd25a3fcd9ab7107baaec3a7055885 Mon Sep 17 00:00:00 2001 From: Logic <376693576@qq.com> Date: Tue, 29 Jan 2019 01:03:06 +0800 Subject: [PATCH] =?UTF-8?q?=E8=83=BD=E6=8F=90=E4=B8=8A=E5=8E=BB=E4=B9=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 2 + dist/main.js | 2 +- example/src/app.vue | 4 +- package.json | 2 +- src/app.vue | 223 ++++++++++++++++++++------------------------ 5 files changed, 109 insertions(+), 124 deletions(-) diff --git a/README.md b/README.md index e1f8275..b3f9db8 100644 --- a/README.md +++ b/README.md @@ -33,6 +33,8 @@ import FlipDown from 'vue-flip-down'; | ------- | ----------- | ---- | ------------------------------------------------------------------------------------- | | endDate | Date/Number | 0 | 结束的时间，即倒计时会从当前时间一直到endDate停止，可以是一个日期对象，也可以是毫秒数 | | type | Number | 4 | 要怎么显示倒计时：4-日时分秒，3-时分秒，2-分秒，1-秒 | +|theme|Number|1|样式：1-合并，2-分离。见下图| +|timeUnit|Array|\[\]|时间单位，显示在空隙之间的文字，比如：\['天','时','分','秒'\] 或 \[':',':',':'\]| ### 事件 | 名称 | 返回值 | 描述 | diff --git a/dist/main.js b/dist/main.js index 91cf6f8..6e71b4f 100644 --- a/dist/main.js +++ b/dist/main.js @@ -1 +1 @@ -!function(n,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports["vue-flip-down"]=t():n["vue-flip-down"]=t()}(window,function(){return function(n){var t={};function e(i){if(t[i])return t[i].exports;var o=t[i]={i:i,l:!1,exports:{}};return n[i].call(o.exports,o,o.exports,e),o.l=!0,o.exports}return e.m=n,e.c=t,e.d=function(n,t,i){e.o(n,t)||Object.defineProperty(n,t,{enumerable:!0,get:i})},e.r=function(n){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(n,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(n,"__esModule",{value:!0})},e.t=function(n,t){if(1&t&&(n=e(n)),8&t)return n;if(4&t&&"object"==typeof n&&n&&n.__esModule)return n;var i=Object.create(null);if(e.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:n}),2&t&&"string"!=typeof n)for(var o in n)e.d(i,o,function(t){return n[t]}.bind(null,o));return i},e.n=function(n){var t=n&&n.__esModule?function(){return n.default}:function(){return n};return e.d(t,"a",t),t},e.o=function(n,t){return Object.prototype.hasOwnProperty.call(n,t)},e.p="",e(e.s=1)}([function(n,t,e){(n.exports=e(3)(!1)).push([n.i,"\n.vue-countdown-component[data-v-5ef48958] {\n display: -webkit-box;\n display: -webkit-flex;\n display: flex;\n}\n@-webkit-keyframes animate-filp-data-v-5ef48958 {\n0% {\n -webkit-transform: rotateX(0);\n transform: rotateX(0);\n}\n100% {\n -webkit-transform: rotateX(-180deg);\n transform: rotateX(-180deg);\n}\n}\n@keyframes animate-filp-data-v-5ef48958 {\n0% {\n -webkit-transform: rotateX(0);\n transform: rotateX(0);\n}\n100% {\n -webkit-transform: rotateX(-180deg);\n transform: rotateX(-180deg);\n}\n}\n@-webkit-keyframes animate-filp2-data-v-5ef48958 {\n0% {\n -webkit-transform: rotateX(180deg);\n transform: rotateX(180deg);\n}\n100% {\n -webkit-transform: rotateX(0);\n transform: rotateX(0);\n}\n}\n@keyframes animate-filp2-data-v-5ef48958 {\n0% {\n -webkit-transform: rotateX(180deg);\n transform: rotateX(180deg);\n}\n100% {\n -webkit-transform: rotateX(0);\n transform: rotateX(0);\n}\n}\n.vue-countdown-component .time-box[data-v-5ef48958] {\n position: relative;\n box-sizing: border-box;\n height: 30px;\n min-width: 28px;\n font-size: 16px;\n text-align: center;\n line-height: 30px;\n background-color: #6c96e8;\n color: #ffffff;\n -webkit-perspective: 50px;\n perspective: 50px;\n border-radius: 3px;\n padding: 0 2px;\n}\n.vue-countdown-component .time-box[data-v-5ef48958]:before {\n content: '';\n position: absolute;\n background: #a7c7ff;\n width: 2px;\n height: 6px;\n top: 50%;\n left: -1px;\n margin-top: -3px;\n}\n.vue-countdown-component .time-box[data-v-5ef48958]:after {\n content: '';\n position: absolute;\n background: #a7c7ff;\n width: 2px;\n height: 6px;\n top: 50%;\n right: -1px;\n margin-top: -3px;\n}\n.vue-countdown-component .time-box + .time-box[data-v-5ef48958] {\n margin-left: 8px;\n}\n.vue-countdown-component .time-box > div[data-v-5ef48958] {\n position: absolute;\n left: 0;\n width: 100%;\n height: 50%;\n overflow: hidden;\n -webkit-transform-style: preserve-3d;\n transform-style: preserve-3d;\n}\n.vue-countdown-component .time-box > div > div[data-v-5ef48958] {\n position: absolute;\n left: 0;\n width: 100%;\n height: 30px;\n}\n.vue-countdown-component .time-box > div.a0[data-v-5ef48958] {\n top: 0;\n border-radius: 3px 3px 0 0;\n background-color: #6c96e8;\n -webkit-transform-origin: 50% bottom;\n transform-origin: 50% bottom;\n -webkit-animation-duration: 500ms;\n animation-duration: 500ms;\n -webkit-transform: rotateX(0);\n transform: rotateX(0);\n -webkit-backface-visibility: hidden;\n backface-visibility: hidden;\n z-index: 2;\n}\n.vue-countdown-component .time-box > div.a0.anime[data-v-5ef48958] {\n -webkit-animation-name: animate-filp-data-v-5ef48958;\n animation-name: animate-filp-data-v-5ef48958;\n}\n.vue-countdown-component .time-box > div.a0 > div[data-v-5ef48958] {\n top: 0;\n}\n.vue-countdown-component .time-box > div.b0[data-v-5ef48958] {\n top: 15px;\n border-radius: 0 0 3px 3px;\n background-color: #73a1f8;\n -webkit-transform-origin: 50% top;\n transform-origin: 50% top;\n -webkit-animation-duration: 500ms;\n animation-duration: 500ms;\n -webkit-transform: rotateX(180deg);\n transform: rotateX(180deg);\n -webkit-backface-visibility: hidden;\n backface-visibility: hidden;\n z-index: 2;\n}\n.vue-countdown-component .time-box > div.b0 > div[data-v-5ef48958] {\n bottom: 0;\n}\n.vue-countdown-component .time-box > div.b0.anime[data-v-5ef48958] {\n -webkit-animation-name: animate-filp2-data-v-5ef48958;\n animation-name: animate-filp2-data-v-5ef48958;\n}\n.vue-countdown-component .time-box > div.a1[data-v-5ef48958] {\n top: 15px;\n border-radius: 0 0 3px 3px;\n background-color: #73a1f8;\n}\n.vue-countdown-component .time-box > div.a1 > div[data-v-5ef48958] {\n bottom: 0;\n}\n",""])},function(n,t,e){n.exports=e(4)},function(n,t,e){"use strict";var i=e(0);e.n(i).a},function(n,t){n.exports=function(n){var t=[];return t.toString=function(){return this.map(function(t){var e=function(n,t){var e,i=n[1]||"",o=n[3];if(!o)return i;if(t&&"function"==typeof btoa){var a=(e=o,"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(e))))+" */"),r=o.sources.map(function(n){return"/*# sourceURL="+o.sourceRoot+n+" */"});return[i].concat(r).concat([a]).join("\n")}return[i].join("\n")}(t,n);return t[2]?"@media "+t[2]+"{"+e+"}":e}).join("")},t.i=function(n,e){"string"==typeof n&&(n=[[null,n,""]]);for(var i={},o=0;o=4?e("div",{staticClass:"time-box"},[n._v("\n "+n._s(n.day)+"\n "),e("div",{class:["b0",{anime:n.isDayAnime}]},[e("div",[n._v(n._s(n.day))])]),n._v(" "),e("div",{class:["a0",{anime:n.isDayAnime}],on:{animationend:n.onDayAnimateEnd}},[e("div",[n._v(n._s(n.dayDelay))])]),n._v(" "),e("div",{staticClass:"a1"},[e("div",[n._v(n._s(n.dayDelay))])])]):n._e(),n._v(" "),n.type>=3?e("div",{staticClass:"time-box"},[n._v("\n "+n._s(n.hour)+"\n "),e("div",{class:["b0",{anime:n.isHourAnime}]},[e("div",[n._v(n._s(n.hour))])]),n._v(" "),e("div",{class:["a0",{anime:n.isHourAnime}],on:{animationend:n.onHourAnimateEnd}},[e("div",[n._v(n._s(n.hourDelay))])]),n._v(" "),e("div",{staticClass:"a1"},[e("div",[n._v(n._s(n.hourDelay))])])]):n._e(),n._v(" "),n.type>=2?e("div",{staticClass:"time-box"},[n._v("\n "+n._s(n.min)+"\n "),e("div",{class:["b0",{anime:n.isMinAnime}]},[e("div",[n._v(n._s(n.min))])]),n._v(" "),e("div",{class:["a0",{anime:n.isMinAnime}],on:{animationend:n.onMinAnimateEnd}},[e("div",[n._v(n._s(n.minDelay))])]),n._v(" "),e("div",{staticClass:"a1"},[e("div",[n._v(n._s(n.minDelay))])])]):n._e(),n._v(" "),e("div",{staticClass:"time-box"},[n._v("\n "+n._s(n.second)+"\n "),e("div",{class:["b0",{anime:n.isSecondAnime}]},[e("div",[n._v(n._s(n.second))])]),n._v(" "),e("div",{class:["a0",{anime:n.isSecondAnime}],on:{animationend:n.onSecondAnimateEnd}},[e("div",[n._v(n._s(n.secondDelay))])]),n._v(" "),e("div",{staticClass:"a1"},[e("div",[n._v(n._s(n.secondDelay))])])])])};i._withStripped=!0;var o={data:()=>({day:"",dayDelay:"",hour:"",hourDelay:"",min:"",minDelay:"",second:"",secondDelay:"",timer:null,isDayAnime:!1,isHourAnime:!1,isMinAnime:!1,isSecondAnime:!1}),props:{endDate:{type:[Date,Number,String],default:0},type:{type:[Number,String],default:4}},computed:{endTime(){return this.endDate instanceof Date?this.endDate.getTime():Number(this.endDate)>0?Number(this.endDate):0}},watch:{day(n){this.isDayAnime=!0,setTimeout(()=>{this.dayDelay=n},350)},hour(n){this.isHourAnime=!0,setTimeout(()=>{this.hourDelay=n},350)},min(n){this.isMinAnime=!0,setTimeout(()=>{this.minDelay=n},350)},second(n){this.isSecondAnime=!0,setTimeout(()=>{this.secondDelay=n},350)},endTime(n){n>0&&this.start()}},mounted(){this.start()},beforeDestroy(){clearTimeout(this.timer)},methods:{start(){clearTimeout(this.timer),this.timer=setTimeout(()=>{let n=this.endTime-(new Date).getTime();n=n<0?0:n;let t=0,e=0,i=0,o=0,a=Number(this.type);a>=4?(t=Math.floor(n/864e5),e=Math.floor(n/36e5-24*t),i=Math.floor(n/6e4-1440*t-60*e),o=Math.floor(n/1e3-86400*t-3600*e-60*i)):a>=3?(e=Math.floor(n/36e5),i=Math.floor(n/6e4-60*e),o=Math.floor(n/1e3-3600*e-60*i)):a>=2?(i=Math.floor(n/6e4),o=Math.floor(n/1e3-60*i)):o=Math.floor(n/1e3),this.day=String(t).padStart(2,"0"),this.hour=String(e).padStart(2,"0"),this.min=String(i).padStart(2,"0"),this.second=String(o).padStart(2,"0"),n>0?this.start():this.$emit("timeUp")},1e3)},onDayAnimateEnd(){this.isDayAnime=!1},onHourAnimateEnd(){this.isHourAnime=!1},onMinAnimateEnd(){this.isMinAnime=!1},onSecondAnimateEnd(){this.isSecondAnime=!1}}};e(2);var a=function(n,t,e,i,o,a,r,s){var d,m="function"==typeof n?n.options:n;if(t&&(m.render=t,m.staticRenderFns=[],m._compiled=!0),m._scopeId="data-v-"+a,d)if(m.functional){m._injectStyles=d;var f=m.render;m.render=function(n,t){return d.call(t),f(n,t)}}else{var u=m.beforeCreate;m.beforeCreate=u?[].concat(u,d):[d]}return{exports:n,options:m}}(o,i,0,0,0,"5ef48958");a.options.__file="src/app.vue";var r=a.exports;t.default=r}])}); \ No newline at end of file +!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports["vue-flip-down"]=e():t["vue-flip-down"]=e()}(window,function(){return function(t){var e={};function n(r){if(e[r])return e[r].exports;var i=e[r]={i:r,l:!1,exports:{}};return t[r].call(i.exports,i,i.exports,n),i.l=!0,i.exports}return n.m=t,n.c=e,n.d=function(t,e,r){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:r})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var i in t)n.d(r,i,function(e){return t[e]}.bind(null,i));return r},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=1)}([function(t,e,n){var r=n(3);"string"==typeof r&&(r=[[t.i,r,""]]);n(5)(r,{hmr:!0,transform:void 0,insertInto:void 0}),r.locals&&(t.exports=r.locals)},function(t,e,n){t.exports=n(7)},function(t,e,n){"use strict";var r=n(0);n.n(r).a},function(t,e,n){(t.exports=n(4)(!1)).push([t.i,"\n.vue-countdown-component {\n display: -webkit-box;\n display: -webkit-flex;\n display: flex;\n}\n@-webkit-keyframes animate-filp {\n0% {\n -webkit-transform: rotateX(0);\n transform: rotateX(0);\n}\n100% {\n -webkit-transform: rotateX(-180deg);\n transform: rotateX(-180deg);\n}\n}\n@keyframes animate-filp {\n0% {\n -webkit-transform: rotateX(0);\n transform: rotateX(0);\n}\n100% {\n -webkit-transform: rotateX(-180deg);\n transform: rotateX(-180deg);\n}\n}\n@-webkit-keyframes animate-filp2 {\n0% {\n -webkit-transform: rotateX(180deg);\n transform: rotateX(180deg);\n}\n100% {\n -webkit-transform: rotateX(0);\n transform: rotateX(0);\n}\n}\n@keyframes animate-filp2 {\n0% {\n -webkit-transform: rotateX(180deg);\n transform: rotateX(180deg);\n}\n100% {\n -webkit-transform: rotateX(0);\n transform: rotateX(0);\n}\n}\n.vue-countdown-component.theme2 .time-box {\n min-width: 21px;\n}\n.vue-countdown-component.theme2 .time-box + .time-box {\n margin-left: 1px;\n}\n.vue-countdown-component .time-unit {\n padding: 0 4px;\n color: #222;\n font-size: 14px;\n line-height: 30px;\n}\n.vue-countdown-component .time-box {\n position: relative;\n box-sizing: border-box;\n height: 30px;\n min-width: 28px;\n font-size: 16px;\n text-align: center;\n line-height: 30px;\n background-color: #6c96e8;\n color: #ffffff;\n -webkit-perspective: 50px;\n perspective: 50px;\n border-radius: 3px;\n padding: 0 2px;\n}\n.vue-countdown-component .time-box:before {\n content: '';\n position: absolute;\n background: #a7c7ff;\n width: 2px;\n height: 6px;\n top: 50%;\n left: -1px;\n margin-top: -3px;\n}\n.vue-countdown-component .time-box:after {\n content: '';\n position: absolute;\n background: #a7c7ff;\n width: 2px;\n height: 6px;\n top: 50%;\n right: -1px;\n margin-top: -3px;\n}\n.vue-countdown-component .time-box + .time-box {\n margin-left: 8px;\n}\n.vue-countdown-component .time-box > div {\n position: absolute;\n left: 0;\n width: 100%;\n height: 50%;\n overflow: hidden;\n -webkit-transform-style: preserve-3d;\n transform-style: preserve-3d;\n}\n.vue-countdown-component .time-box > div > div {\n position: absolute;\n left: 0;\n width: 100%;\n height: 30px;\n}\n.vue-countdown-component .time-box > div.a0 {\n top: 0;\n border-radius: 3px 3px 0 0;\n background-color: #6c96e8;\n -webkit-transform-origin: 50% bottom;\n transform-origin: 50% bottom;\n -webkit-animation-duration: 500ms;\n animation-duration: 500ms;\n -webkit-transform: rotateX(0);\n transform: rotateX(0);\n -webkit-backface-visibility: hidden;\n backface-visibility: hidden;\n z-index: 2;\n}\n.vue-countdown-component .time-box > div.a0.anime {\n -webkit-animation-name: animate-filp;\n animation-name: animate-filp;\n}\n.vue-countdown-component .time-box > div.a0 > div {\n top: 0;\n}\n.vue-countdown-component .time-box > div.b0 {\n top: 15px;\n border-radius: 0 0 3px 3px;\n background-color: #73a1f8;\n -webkit-transform-origin: 50% top;\n transform-origin: 50% top;\n -webkit-animation-duration: 500ms;\n animation-duration: 500ms;\n -webkit-transform: rotateX(180deg);\n transform: rotateX(180deg);\n -webkit-backface-visibility: hidden;\n backface-visibility: hidden;\n z-index: 2;\n}\n.vue-countdown-component .time-box > div.b0 > div {\n bottom: 0;\n}\n.vue-countdown-component .time-box > div.b0.anime {\n -webkit-animation-name: animate-filp2;\n animation-name: animate-filp2;\n}\n.vue-countdown-component .time-box > div.a1 {\n top: 15px;\n border-radius: 0 0 3px 3px;\n background-color: #73a1f8;\n}\n.vue-countdown-component .time-box > div.a1 > div {\n bottom: 0;\n}\n",""])},function(t,e){t.exports=function(t){var e=[];return e.toString=function(){return this.map(function(e){var n=function(t,e){var n,r=t[1]||"",i=t[3];if(!i)return r;if(e&&"function"==typeof btoa){var o=(n=i,"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(n))))+" */"),a=i.sources.map(function(t){return"/*# sourceURL="+i.sourceRoot+t+" */"});return[r].concat(a).concat([o]).join("\n")}return[r].join("\n")}(e,t);return e[2]?"@media "+e[2]+"{"+n+"}":n}).join("")},e.i=function(t,n){"string"==typeof t&&(t=[[null,t,""]]);for(var r={},i=0;i=0&&c.splice(e,1)}function b(t){var e=document.createElement("style");if(void 0===t.attrs.type&&(t.attrs.type="text/css"),void 0===t.attrs.nonce){var r=n.nc;r&&(t.attrs.nonce=r)}return v(e,t.attrs),m(t,e),e}function v(t,e){Object.keys(e).forEach(function(n){t.setAttribute(n,e[n])})}function y(t,e){var n,r,i,o;if(e.transform&&t.css){if(!(o=e.transform(t.css)))return function(){};t.css=o}if(e.singleton){var a=f++;n=u||(u=b(e)),r=w.bind(null,n,a,!1),i=w.bind(null,n,a,!0)}else t.sourceMap&&"function"==typeof URL&&"function"==typeof URL.createObjectURL&&"function"==typeof URL.revokeObjectURL&&"function"==typeof Blob&&"function"==typeof btoa?(n=function(t){var e=document.createElement("link");return void 0===t.attrs.type&&(t.attrs.type="text/css"),t.attrs.rel="stylesheet",v(e,t.attrs),m(t,e),e}(e),r=function(t,e,n){var r=n.css,i=n.sourceMap,o=void 0===e.convertToAbsoluteUrls&&i;(e.convertToAbsoluteUrls||o)&&(r=p(r)),i&&(r+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(i))))+" */");var a=new Blob([r],{type:"text/css"}),s=t.href;t.href=URL.createObjectURL(a),s&&URL.revokeObjectURL(s)}.bind(null,n,e),i=function(){h(n),n.href&&URL.revokeObjectURL(n.href)}):(n=b(e),r=function(t,e){var n=e.css,r=e.media;if(r&&t.setAttribute("media",r),t.styleSheet)t.styleSheet.cssText=n;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(n))}}.bind(null,n),i=function(){h(n)});return r(t),function(e){if(e){if(e.css===t.css&&e.media===t.media&&e.sourceMap===t.sourceMap)return;r(t=e)}else i()}}t.exports=function(t,e){if("undefined"!=typeof DEBUG&&DEBUG&&"object"!=typeof document)throw new Error("The style-loader cannot be used in a non-browser environment");(e=e||{}).attrs="object"==typeof e.attrs?e.attrs:{},e.singleton||"boolean"==typeof e.singleton||(e.singleton=a()),e.insertInto||(e.insertInto="head"),e.insertAt||(e.insertAt="bottom");var n=l(t,e);return d(n,e),function(t){for(var r=[],i=0;i({timeArray:["00","00","00","00"],timeArrayT:["00","00","00","00"],isAnimate:[!1,!1,!1,!1]}),props:{endDate:{type:[Date,Number,String],default:0},type:{type:[Number,String],default:4},theme:{type:[Number,String],default:1},timeUnit:{type:Array,default:()=>[]}},computed:{endTime(){return this.endDate instanceof Date?this.endDate.getTime():Number(this.endDate)>0?Number(this.endDate):0},step(){return 1===this.theme?1:2},arr(){const t=this.timeArray.length,e=this.step,n=[t-1,t-e-1,t-2*e-1,t-3*e-1];return n.length=this.type>1?this.type:1,n}},watch:{timeArray(t,e){const n=[];t.forEach((t,r)=>{t!==e[r]&&(this.$set(this.isAnimate,r,!0),n.push({value:t,index:r}))}),setTimeout(()=>{n.forEach(t=>{this.$set(this.timeArrayT,t.index,t.value)})},350)},endTime(t){t>0&&this.start(!0)}},mounted(){this.start(!0)},beforeDestroy(){clearTimeout(this.timer)},methods:{start(t){clearTimeout(this.timer),this.timer=setTimeout(()=>{let e=this.endTime-(new Date).getTime();e=e<0?0:e;let n=0,r=0,i=0,o=0;const a=Number(this.type);a>=4?(n=Math.floor(e/864e5),r=Math.floor(e/36e5-24*n),i=Math.floor(e/6e4-1440*n-60*r),o=Math.floor(e/1e3-86400*n-3600*r-60*i)):a>=3?(r=Math.floor(e/36e5),i=Math.floor(e/6e4-60*r),o=Math.floor(e/1e3-3600*r-60*i)):a>=2?(i=Math.floor(e/6e4),o=Math.floor(e/1e3-60*i)):o=Math.floor(e/1e3);let s=[];1===Number(this.theme)?(a>=4&&s.push(String(n).padStart(2,"0")),a>=3&&s.push(String(r).padStart(2,"0")),a>=2&&s.push(String(i).padStart(2,"0")),s.push(String(o).padStart(2,"0"))):(a>=4&&s.push(...String(n).padStart(2,"0").split("")),a>=3&&s.push(...String(r).padStart(2,"0").split("")),a>=2&&s.push(...String(i).padStart(2,"0").split("")),s.push(...String(o).padStart(2,"0").split(""))),this.timeArray=s,t&&(this.timeArrayT=[...this.timeArray],this.isAnimate=new Array(this.timeArray.length).fill(!1)),e>0?this.start():this.$emit("timeUp")},1e3)},onAnimateEnd(t){this.$set(this.isAnimate,t,!1)},isTimeUnitShow(t){return!(!this.arr.includes(t)||t===this.timeArray.length-1&&!this.timeUnit[3])},setTimeUnit(t){switch(t){case this.timeArray.length-1:return this.timeUnit[3]||"";case this.timeArray.length-this.step-1:return this.timeUnit[2]||"";case this.timeArray.length-2*this.step-1:return this.timeUnit[1]||"";default:return this.timeUnit[0]||""}}}};n(2);var o=function(t,e,n,r,i,o,a,s){var u,f="function"==typeof t?t.options:t;if(e&&(f.render=e,f.staticRenderFns=[],f._compiled=!0),u)if(f.functional){f._injectStyles=u;var c=f.render;f.render=function(t,e){return u.call(e),c(t,e)}}else{var p=f.beforeCreate;f.beforeCreate=p?[].concat(p,u):[u]}return{exports:t,options:f}}(i,r);o.options.__file="src/app.vue";var a=o.exports;e.default=a}])}); \ No newline at end of file diff --git a/example/src/app.vue b/example/src/app.vue index f6b7bfb..796d087 100644 --- a/example/src/app.vue +++ b/example/src/app.vue @@ -2,6 +2,8 @@
@@ -15,7 +17,7 @@ export default { data() { return { type: 4, - endDate: new Date().getTime(), + endDate: new Date().getTime() + 30000, }; }, components: { diff --git a/package.json b/package.json index 0841c69..4b8f54f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vue-flip-down", - "version": "1.0.1", + "version": "1.0.2", "description": "vue 翻页效果的倒计时组件", "main": "dist/main.js", "scripts": { diff --git a/src/app.vue b/src/app.vue index 0b884c2..baef8db 100644 --- a/src/app.vue +++ b/src/app.vue @@ -1,68 +1,24 @@ @@ -70,24 +26,16 @@ export default { data() { return { - day: '', // 剩余日 - dayDelay: '', - hour: '', // 剩余小时 - hourDelay: '', - min: '', // 剩余分钟 - minDelay: '', - second: '', // 剩余秒 - secondDelay: '', - timer: null, // 计时器 - isDayAnime: false, // 日 执行动画 - isHourAnime: false, // 时 执行动画 - isMinAnime: false, // 分 执行动画 - isSecondAnime: false, // 秒 执行动画 + timeArray: ['00','00','00','00'], + timeArrayT: ['00','00','00','00'], + isAnimate:[false,false,false,false], }; }, props: { endDate: { type: [Date, Number, String], default: 0 }, // 截止时间 type: { type: [Number, String], default: 4 }, // 时间精度 4/3/2/1 + theme: {type: [Number, String], default: 1}, + timeUnit: {type: Array, default: ()=>[]}, }, computed: { endTime() { @@ -96,78 +44,90 @@ export default { } 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: { - day(newV) { - this.isDayAnime = true; + timeArray(newV,oldV){ + const diff = []; + newV.forEach((value,index)=>{ + if(value !== oldV[index]){ + this.$set(this.isAnimate, index, true); + diff.push({value,index}); + } + }); setTimeout(() => { - this.dayDelay = newV; - }, 350); - }, - hour(newV) { - this.isHourAnime = true; - setTimeout(() => { - this.hourDelay = newV; - }, 350); - }, - min(newV) { - this.isMinAnime = true; - setTimeout(() => { - this.minDelay = newV; - }, 350); - }, - second(newV) { - this.isSecondAnime = true; - setTimeout(() => { - this.secondDelay = newV; + diff.forEach((item)=>{ + this.$set(this.timeArrayT, item.index, item.value); + }); }, 350); }, endTime(newV) { if (newV > 0) { - this.start(); + this.start(true); } }, }, mounted() { - this.start(); + this.start(true); }, beforeDestroy() { clearTimeout(this.timer); }, methods: { // 开始倒计时 - start() { + start(isFirst) { 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 hour = 0; // 剩余的小时 + let min = 0; // 剩余的分钟 let second = 0; // 剩余的秒 - let type = Number(this.type); + 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); // 剩余的分钟 已排除天和小时 + 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); // 剩余的分钟 已排除天和小时 + min = Math.floor(t / 60000); // 剩余的分钟 second = Math.floor(t / 1000 - min * 60); // 剩余的秒 } else { second = Math.floor(t / 1000); // 剩余的秒 } - this.day = String(day).padStart(2, '0'); - this.hour = String(hour).padStart(2, '0'); - this.min = String(min).padStart(2, '0'); - this.second = String(second).padStart(2, '0'); - + 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(isFirst){ + this.timeArrayT = [...this.timeArray]; + this.isAnimate = new Array(this.timeArray.length).fill(false); + } if (t > 0) { this.start(); } else { @@ -175,24 +135,31 @@ export default { } }, 1000); }, - // 日 动画结束 - onDayAnimateEnd() { - this.isDayAnime = false; + onAnimateEnd(index){ + this.$set(this.isAnimate, index, false); }, - onHourAnimateEnd() { - this.isHourAnime = false; - }, - onMinAnimateEnd() { - this.isMinAnime = false; - }, - onSecondAnimateEnd() { - this.isSecondAnime = 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] || ''; // 天 + } + } }, }; -