mirror of
https://github.com/javaLuo/vue-flip-down.git
synced 2025-04-06 03:58:09 +08:00
1 line
9.5 KiB
JavaScript
1 line
9.5 KiB
JavaScript
!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<this.length;o++){var a=this[o][0];"number"==typeof a&&(i[a]=!0)}for(o=0;o<n.length;o++){var r=n[o];"number"==typeof r[0]&&i[r[0]]||(e&&!r[2]?r[2]=e:e&&(r[2]="("+r[2]+") and ("+e+")"),t.push(r))}},t}},function(n,t,e){"use strict";e.r(t);var i=function(){var n=this,t=n.$createElement,e=n._self._c||t;return e("div",{staticClass:"vue-countdown-component"},[n.type>=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}])}); |