pd-design
Version:
产品组件库
2 lines (1 loc) • 2.48 kB
JavaScript
;Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),N=e.defineComponent({name:"PdNumberAnimate",__name:"NumberAnimate",props:{value:{default:0},math:{default:"ceil"},textMaxWidth:{default:"9.6px"},duration:{default:1},effect:{default:"ease-in-out"}},setup(p){const u=e.ref(["0"]),s=e.ref(["0"]),m=e.ref("20px"),o=p;e.watch(()=>o.value,(t,r)=>{t!==r&&h(t)});const i=e.ref([]);let f=null;const g=t=>{let r=t;switch(o.math){case"ceil":r=Math.ceil(t);break;case"floor":r=Math.floor(t);break;case"abs":r=Math.abs(t);break;case"none":r=t;break}return r},h=t=>{const r=g(t).toString().replace(/\B(?=(\d{3})+(?!\d))/g,",");for(s.value=u.value,u.value=Array.from(r);s.value.length<u.value.length;)s.value.unshift("0");const a=u.value.length-s.value.length;a<0&&s.value.splice(0,Math.abs(a)),console.log(o,"props.transition"),i.value.forEach(l=>{l.style.transform="translateY(0)",l.style.transition=`transform 0s ${o.effect}`}),e.nextTick(()=>{f&&clearTimeout(f),f=setTimeout(()=>{i.value.forEach((l,n)=>{const c=y(s.value[n],u.value[n]);c?(l.style.transform=c.transform,l.style.transition=c.transition):(l.style.transform="none",l.style.transition="none")})},50)})},v=(t,r)=>{if(isNaN(Number(r)))return[r];if(t===r)return[r];const a=[0,1,2,3,4,5,6,7,8,9];let l=[];return isNaN(Number(t))?l=a.filter(n=>n<=Number(r)):t>r?(l.push(...a.filter(n=>n>=Number(t))),l.push(...a.filter(n=>n<=Number(r)))):l.push(...a.filter(n=>n>=Number(t)&&n<=Number(r))),l},y=(t,r)=>{const a=v(t,r).length;return a===1?null:{transform:`translateY(-${(a-1)/a*100}%)`,transition:`transform ${o.duration}s ${o.effect}`}};return e.onMounted(()=>{if(h(o.value),i.value.length>0){const t=window.getComputedStyle(i.value[0]);m.value=t.height}}),(t,r)=>(e.openBlock(),e.createElementBlock("div",{class:"pd-animate-number",style:e.normalizeStyle({height:e.unref(m)}),ref:""},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(u),(a,l)=>(e.openBlock(),e.createElementBlock("div",{key:"num_"+l},[e.createElementVNode("div",{ref_for:!0,ref_key:"numDiv",ref:i,class:e.normalizeClass(["num-item",a===","?"comma":""])},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(v(e.unref(s)[l],a),(n,c)=>(e.openBlock(),e.createElementBlock("div",{style:e.normalizeStyle({width:isNaN(n)?"":o.textMaxWidth}),key:"div_"+l+"_"+c,class:"num-line"},e.toDisplayString(n),5))),128))],2)]))),128))],4))}});exports.default=N;