mirror of
https://github.com/javaLuo/vue-flip-down.git
synced 2025-04-06 03:58:09 +08:00
1 line
14 KiB
JavaScript
1 line
14 KiB
JavaScript
!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<this.length;i++){var o=this[i][0];"number"==typeof o&&(r[o]=!0)}for(i=0;i<t.length;i++){var a=t[i];"number"==typeof a[0]&&r[a[0]]||(n&&!a[2]?a[2]=n:n&&(a[2]="("+a[2]+") and ("+n+")"),e.push(a))}},e}},function(t,e,n){var r,i,o={},a=(r=function(){return window&&document&&document.all&&!window.atob},function(){return void 0===i&&(i=r.apply(this,arguments)),i}),s=function(t){var e={};return function(t,n){if("function"==typeof t)return t();if(void 0===e[t]){var r=function(t,e){return e?e.querySelector(t):document.querySelector(t)}.call(this,t,n);if(window.HTMLIFrameElement&&r instanceof window.HTMLIFrameElement)try{r=r.contentDocument.head}catch(t){r=null}e[t]=r}return e[t]}}(),u=null,f=0,c=[],p=n(6);function d(t,e){for(var n=0;n<t.length;n++){var r=t[n],i=o[r.id];if(i){i.refs++;for(var a=0;a<i.parts.length;a++)i.parts[a](r.parts[a]);for(;a<r.parts.length;a++)i.parts.push(y(r.parts[a],e))}else{var s=[];for(a=0;a<r.parts.length;a++)s.push(y(r.parts[a],e));o[r.id]={id:r.id,refs:1,parts:s}}}}function l(t,e){for(var n=[],r={},i=0;i<t.length;i++){var o=t[i],a=e.base?o[0]+e.base:o[0],s={css:o[1],media:o[2],sourceMap:o[3]};r[a]?r[a].parts.push(s):n.push(r[a]={id:a,parts:[s]})}return n}function m(t,e){var n=s(t.insertInto);if(!n)throw new Error("Couldn't find a style target. This probably means that the value for the 'insertInto' parameter is invalid.");var r=c[c.length-1];if("top"===t.insertAt)r?r.nextSibling?n.insertBefore(e,r.nextSibling):n.appendChild(e):n.insertBefore(e,n.firstChild),c.push(e);else if("bottom"===t.insertAt)n.appendChild(e);else{if("object"!=typeof t.insertAt||!t.insertAt.before)throw new Error("[Style Loader]\n\n Invalid value for parameter 'insertAt' ('options.insertAt') found.\n Must be 'top', 'bottom', or Object.\n (https://github.com/webpack-contrib/style-loader#insertat)\n");var i=s(t.insertAt.before,n);n.insertBefore(e,i)}}function h(t){if(null===t.parentNode)return!1;t.parentNode.removeChild(t);var e=c.indexOf(t);e>=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<n.length;i++){var a=n[i];(s=o[a.id]).refs--,r.push(s)}for(t&&d(l(t,e),e),i=0;i<r.length;i++){var s;if(0===(s=r[i]).refs){for(var u=0;u<s.parts.length;u++)s.parts[u]();delete o[s.id]}}}};var g,x=(g=[],function(t,e){return g[t]=e,g.filter(Boolean).join("\n")});function w(t,e,n,r){var i=n?"":r.css;if(t.styleSheet)t.styleSheet.cssText=x(e,i);else{var o=document.createTextNode(i),a=t.childNodes;a[e]&&t.removeChild(a[e]),a.length?t.insertBefore(o,a[e]):t.appendChild(o)}}},function(t,e){t.exports=function(t){var e="undefined"!=typeof window&&window.location;if(!e)throw new Error("fixUrls requires window.location");if(!t||"string"!=typeof t)return t;var n=e.protocol+"//"+e.host,r=n+e.pathname.replace(/\/[^\/]*$/,"/");return t.replace(/url\s*\(((?:[^)(]|\((?:[^)(]+|\([^)(]*\))*\))*)\)/gi,function(t,e){var i,o=e.trim().replace(/^"(.*)"$/,function(t,e){return e}).replace(/^'(.*)'$/,function(t,e){return e});return/^(#|data:|http:\/\/|https:\/\/|file:\/\/\/|\s*$)/i.test(o)?t:(i=0===o.indexOf("//")?o:0===o.indexOf("/")?n+o:r+o.replace(/^\.\//,""),"url("+JSON.stringify(i)+")")})}},function(t,e,n){"use strict";n.r(e);var r=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{class:["vue-countdown-component",{theme2:1!==t.theme}]},[t._l(t.timeArray,function(e,r){return[n("div",{key:r,class:["time-box"]},[t._v("\n "+t._s(e)+"\n "),n("div",{class:["b0",{anime:t.isAnimate[r]}]},[n("div",[t._v(t._s(e))])]),t._v(" "),n("div",{class:["a0",{anime:t.isAnimate[r]}],on:{animationend:function(e){t.onAnimateEnd(r)}}},[n("div",[t._v(t._s(t.timeArrayT[r]))])]),t._v(" "),n("div",{staticClass:"a1"},[n("div",[t._v(t._s(t.timeArrayT[r]))])])]),t._v(" "),t.isTimeUnitShow(r)?n("div",{staticClass:"time-unit"},[t._v("\n "+t._s(t.setTimeUnit(r))+"\n ")]):t._e()]})],2)};r._withStripped=!0;var i={data:()=>({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}])}); |