uv-ui
Version:
基于vue3的移动端组件库
2 lines (1 loc) • 2.76 kB
JavaScript
"use strict";const r=require("vue"),x=require("../../hooks/useRequestAnimationFrame.cjs");require("../../hooks/useCountDown.cjs");const A={name:"UvCountTo"},D=Object.assign(A,{props:{start:{type:Number,required:!1,default:0},end:{type:Number,required:!1,default:0},duration:{type:Number,required:!1,default:5e3},autoPlay:{type:Boolean,required:!1,default:!0},decimals:{type:Number,required:!1,default:0,validator(n){return n>=0}},decimal:{type:String,required:!1,default:"."},separator:{type:String,required:!1,default:","},prefix:{type:String,required:!1,default:""},suffix:{type:String,required:!1,default:""},useEasing:{type:Boolean,required:!1,default:!0},easingFn:{type:Function,default(n,i,o,t){return o*(-Math.pow(2,-10*n/t)+1)*1024/1023+i}},fontSize:{type:String},bold:{type:Boolean,default:!1},color:{type:String}},emits:["onMountedcallback","callback"],setup(n,{expose:i,emit:o}){const t=n,{requestAnimationFrame:u,cancelAnimationFrame:c}=x.useRequestAnimationFrame(),S=a=>!isNaN(parseFloat(a)),d=a=>{a=a.toFixed(t.default),a+="";const l=a.split(".");let s=l[0];const b=l.length>1?t.decimal+l[1]:"",y=/(\d+)(\d{3})/;if(t.separator&&!S(t.separator))for(;y.test(s);)s=s.replace(y,"$1"+t.separator+"$2");return t.prefix+s+b+t.suffix},e=r.reactive({localStart:t.start,displayValue:d(t.start),printVal:null,paused:!1,localDuration:t.duration,startTime:null,timestamp:null,remaining:null,rAF:null}),p=r.computed(()=>t.start>t.end),f=()=>{e.localStart=t.start,e.startTime=null,e.localDuration=t.duration,e.paused=!1,e.rAF=u(m)};r.watch(()=>t.start,()=>{t.autoPlay&&f()}),r.watch(()=>t.end,()=>{t.autoPlay&&f()}),r.onMounted(()=>{t.autoPlay&&f(),o("onMountedcallback")});const g=()=>{c(e.rAF)},q=()=>{e.startTime=null,e.localDuration=+e.remaining,e.localStart=+e.printVal,u(m)},F=()=>{e.paused?(q(),e.paused=!1):(g(),e.paused=!0)},V=()=>{e.startTime=null,c(e.rAF),e.displayValue=d(t.start)},m=a=>{e.startTime||(e.startTime=a),e.timestamp=a;const l=a-e.startTime;e.remaining=e.localDuration-l,t.useEasing?p.value?e.printVal=e.localStart-t.easingFn(l,0,e.localStart-t.end,e.localDuration):e.printVal=t.easingFn(l,e.localStart,t.end-e.localStart,e.localDuration):p.value?e.printVal=e.localStart-(e.localStart-t.end)*(l/e.localDuration):e.printVal=e.localStart+(t.end-e.localStart)*(l/e.localDuration),p.value?e.printVal=e.printVal<t.end?t.end:e.printVal:e.printVal=e.printVal>t.end?t.end:e.printVal,e.displayValue=d(e.printVal),l<e.localDuration?e.rAF=u(m):o("callback")};return r.onUnmounted(()=>{c(e.rAF)}),i({pauseResume:F,reset:V}),(a,l)=>(r.openBlock(),r.createElementBlock("span",{class:"uv-count-to",style:r.normalizeStyle({fontSize:n.fontSize,fontWeight:n.bold?"700":"500",color:n.color})},r.toDisplayString(e.displayValue),5))}});module.exports=D;