vue3-odometer-plus
Version:
数字翻滚 number rolling odometer odometer-plus
3 lines (2 loc) • 4.55 kB
JavaScript
(function(o,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("odometer")):typeof define=="function"&&define.amd?define(["exports","vue","odometer"],e):(o=typeof globalThis<"u"?globalThis:o||self,e(o.NumberRolling={},o.Vue,o.Odometer))})(this,function(o,e,u){"use strict";var l=document.createElement("style");l.textContent=`.odometer.odometer-auto-theme,.odometer.odometer-theme-default,.odometer.odometer-auto-theme .odometer-digit,.odometer.odometer-theme-default .odometer-digit{display:inline-block;vertical-align:middle;vertical-align:auto;zoom:1;display:inline;position:relative}.odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer,.odometer.odometer-theme-default .odometer-digit .odometer-digit-spacer{display:inline-block;vertical-align:middle;vertical-align:auto;zoom:1;display:inline;visibility:hidden}.odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner,.odometer.odometer-theme-default .odometer-digit .odometer-digit-inner{text-align:left;display:block;position:absolute;top:0;left:0;right:0;bottom:0;overflow:hidden}.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon,.odometer.odometer-theme-default .odometer-digit .odometer-ribbon{display:block}.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon-inner,.odometer.odometer-theme-default .odometer-digit .odometer-ribbon-inner{display:block;-webkit-backface-visibility:hidden}.odometer.odometer-auto-theme .odometer-digit .odometer-value,.odometer.odometer-theme-default .odometer-digit .odometer-value{display:block;-webkit-transform:translateZ(0)}.odometer.odometer-auto-theme .odometer-digit .odometer-value.odometer-last-value,.odometer.odometer-theme-default .odometer-digit .odometer-value.odometer-last-value{position:absolute}.odometer.odometer-auto-theme.odometer-animating-up .odometer-ribbon-inner,.odometer.odometer-theme-default.odometer-animating-up .odometer-ribbon-inner{-webkit-transition:-webkit-transform 2s;-moz-transition:-moz-transform 2s;-ms-transition:-ms-transform 2s;-o-transition:-o-transform 2s;transition:transform 2s}.odometer.odometer-auto-theme.odometer-animating-up.odometer-animating .odometer-ribbon-inner,.odometer.odometer-theme-default.odometer-animating-up.odometer-animating .odometer-ribbon-inner,.odometer.odometer-auto-theme.odometer-animating-down .odometer-ribbon-inner,.odometer.odometer-theme-default.odometer-animating-down .odometer-ribbon-inner{-webkit-transform:translateY(-100%);-moz-transform:translateY(-100%);-ms-transform:translateY(-100%);-o-transform:translateY(-100%);transform:translateY(-100%)}.odometer.odometer-auto-theme.odometer-animating-down.odometer-animating .odometer-ribbon-inner,.odometer.odometer-theme-default.odometer-animating-down.odometer-animating .odometer-ribbon-inner{-webkit-transition:-webkit-transform 2s;-moz-transition:-moz-transform 2s;-ms-transition:-ms-transform 2s;-o-transition:-o-transform 2s;transition:transform 2s;-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0)}.odometer.odometer-auto-theme,.odometer.odometer-theme-default{font-family:Helvetica Neue,sans-serif;line-height:1.1em}.odometer.odometer-auto-theme .odometer-value,.odometer.odometer-theme-default .odometer-value{text-align:center}.vue3-number-roll[data-v-5fa56450]{font-size:inherit;font-weight:inherit;color:inherit;font-style:inherit;white-space:nowrap}
/*$vite$:1*/`,document.head.appendChild(l);const s=((t,n)=>{const m=t.__vccOpts||t;for(const[r,i]of n)m[r]=i;return m})(e.defineComponent({__name:"number-rolling",props:{start:{default:0},value:{default:0},format:{default:"(d).dd"},theme:{default:"default"},formatFunction:{type:Function},animation:{default:"default"},selector:{default:".odometer"},auto:{type:Boolean,default:!1},duration:{default:1e3}},setup(t,{expose:n}){const m=e.useTemplateRef("odometerEl"),r=e.shallowRef();e.onMounted(()=>{r.value=new u({auto:t.auto,selector:t.selector,animation:t.animation,el:m.value,value:t.start,format:t.format,duration:t.duration,theme:t.theme,formatFunction:t.formatFunction}),e.watchPostEffect(()=>{r.value.update(t.value)})});function i(a){var d;(d=r.value)==null||d.update(a)}return n({old:r,update:i}),(a,d)=>(e.openBlock(),e.createElementBlock("span",{class:e.normalizeClass(["vue3-number-roll",a.theme]),ref:"odometerEl"},null,2))}}),[["__scopeId","data-v-5fa56450"]]);o.NumberRolling=s,o.default=s,Object.defineProperties(o,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});