cc-element-components/statistic/index.umd.js

该项目是基于`element-plus`二次封装组件，使用的技术栈为`vue3` + `typescript` + `element-plus`。在此项目当中，我们会基于`element-plus`的组件库已有组件封装如下组件: - 图标选择器 - 时间选择器 - 城市选择器 - 省市区选择器 - 通知菜单 - 趋势标记 - 评论 - 数据列表 - 数值统计 - 倒计时 - 分割面板 - 时间轴 - 弹框拓展 - 进度条拓展 - 导航菜单拓展 - 可配置项表格 - 可配置项表单 - 日历

(function(e,d){typeof exports=="object"&&typeof module!="undefined"?module.exports=d(require("vue")):typeof define=="function"&&define.amd?define(["vue"],d):(e=typeof globalThis!="undefined"?globalThis:e||self,e.index=d(e.Vue))})(this,function(e){"use strict";var d=globalThis&&globalThis.__assign||function(){return(d=Object.assign||function(i){for(var a,s=1,o=arguments.length;s<o;s++)for(var t in a=arguments[s])Object.prototype.hasOwnProperty.call(a,t)&&(i[t]=a[t]);return i}).apply(this,arguments)},g=function(){function i(a,s,o){var t=this;this.target=a,this.endVal=s,this.options=o,this.version="2.0.8",this.defaults={startVal:0,decimalPlaces:0,duration:2,useEasing:!0,useGrouping:!0,smartEasingThreshold:999,smartEasingAmount:333,separator:",",decimal:".",prefix:"",suffix:""},this.finalEndVal=null,this.useEasing=!0,this.countDown=!1,this.error="",this.startVal=0,this.paused=!0,this.count=function(h){t.startTime||(t.startTime=h);var l=h-t.startTime;t.remaining=t.duration-l,t.useEasing?t.countDown?t.frameVal=t.startVal-t.easingFn(l,0,t.startVal-t.endVal,t.duration):t.frameVal=t.easingFn(l,t.startVal,t.endVal-t.startVal,t.duration):t.countDown?t.frameVal=t.startVal-(t.startVal-t.endVal)*(l/t.duration):t.frameVal=t.startVal+(t.endVal-t.startVal)*(l/t.duration),t.countDown?t.frameVal=t.frameVal<t.endVal?t.endVal:t.frameVal:t.frameVal=t.frameVal>t.endVal?t.endVal:t.frameVal,t.frameVal=Number(t.frameVal.toFixed(t.options.decimalPlaces)),t.printValue(t.frameVal),l<t.duration?t.rAF=requestAnimationFrame(t.count):t.finalEndVal!==null?t.update(t.finalEndVal):t.callback&&t.callback()},this.formatNumber=function(h){var l,n,u,r,c=h<0?"-":"";l=Math.abs(h).toFixed(t.options.decimalPlaces);var m=(l+="").split(".");if(n=m[0],u=m.length>1?t.options.decimal+m[1]:"",t.options.useGrouping){r="";for(var p=0,V=n.length;p<V;++p)p!==0&&p%3==0&&(r=t.options.separator+r),r=n[V-p-1]+r;n=r}return t.options.numerals&&t.options.numerals.length&&(n=n.replace(/[0-9]/g,function(f){return t.options.numerals[+f]}),u=u.replace(/[0-9]/g,function(f){return t.options.numerals[+f]})),c+t.options.prefix+n+u+t.options.suffix},this.easeOutExpo=function(h,l,n,u){return n*(1-Math.pow(2,-10*h/u))*1024/1023+l},this.options=d(d({},this.defaults),o),this.formattingFn=this.options.formattingFn?this.options.formattingFn:this.formatNumber,this.easingFn=this.options.easingFn?this.options.easingFn:this.easeOutExpo,this.startVal=this.validateValue(this.options.startVal),this.frameVal=this.startVal,this.endVal=this.validateValue(s),this.options.decimalPlaces=Math.max(this.options.decimalPlaces),this.resetDuration(),this.options.separator=String(this.options.separator),this.useEasing=this.options.useEasing,this.options.separator===""&&(this.options.useGrouping=!1),this.el=typeof a=="string"?document.getElementById(a):a,this.el?this.printValue(this.startVal):this.error="[CountUp] target is null or undefined"}return i.prototype.determineDirectionAndSmartEasing=function(){var a=this.finalEndVal?this.finalEndVal:this.endVal;this.countDown=this.startVal>a;var s=a-this.startVal;if(Math.abs(s)>this.options.smartEasingThreshold){this.finalEndVal=a;var o=this.countDown?1:-1;this.endVal=a+o*this.options.smartEasingAmount,this.duration=this.duration/2}else this.endVal=a,this.finalEndVal=null;this.finalEndVal?this.useEasing=!1:this.useEasing=this.options.useEasing},i.prototype.start=function(a){this.error||(this.callback=a,this.duration>0?(this.determineDirectionAndSmartEasing(),this.paused=!1,this.rAF=requestAnimationFrame(this.count)):this.printValue(this.endVal))},i.prototype.pauseResume=function(){this.paused?(this.startTime=null,this.duration=this.remaining,this.startVal=this.frameVal,this.determineDirectionAndSmartEasing(),this.rAF=requestAnimationFrame(this.count)):cancelAnimationFrame(this.rAF),this.paused=!this.paused},i.prototype.reset=function(){cancelAnimationFrame(this.rAF),this.paused=!0,this.resetDuration(),this.startVal=this.validateValue(this.options.startVal),this.frameVal=this.startVal,this.printValue(this.startVal)},i.prototype.update=function(a){cancelAnimationFrame(this.rAF),this.startTime=null,this.endVal=this.validateValue(a),this.endVal!==this.frameVal&&(this.startVal=this.frameVal,this.finalEndVal||this.resetDuration(),this.finalEndVal=null,this.determineDirectionAndSmartEasing(),this.rAF=requestAnimationFrame(this.count))},i.prototype.printValue=function(a){var s=this.formattingFn(a);this.el.tagName==="INPUT"?this.el.value=s:this.el.tagName==="text"||this.el.tagName==="tspan"?this.el.textContent=s:this.el.innerHTML=s},i.prototype.ensureNumber=function(a){return typeof a=="number"&&!isNaN(a)},i.prototype.validateValue=function(a){var s=Number(a);return this.ensureNumber(s)?s:(this.error="[CountUp] invalid start or end value: "+a,null)},i.prototype.resetDuration=function(){this.startTime=null,this.duration=1e3*Number(this.options.duration),this.remaining=this.duration},i}(),b="",E=(i,a)=>{for(const[s,o]of a)i[s]=o;return i};const y={class:"cc-statistic"},_={class:"cc-statistic-title"},v={key:0},F=["id"],N={class:"cc-statistic-title"},A={key:0};var k=E(e.defineComponent({props:{title:{default:""},value:null,extra:{default:""},precision:{default:0},separator:{default:","},showGroupSeparator:{type:Boolean,default:!1},start:{type:Boolean,default:!0},loading:{type:Boolean,default:!1},animation:{type:Boolean,default:!1},animationDuration:{default:2e3}},setup(i){const a=i,s=e.getCurrentInstance().uid,o=e.ref(""),t=e.ref(null),h=(n,u)=>{let r=[];for(let c=0;c<n.length;c+=u)r.push(n.slice(c,c+u));return r},l=()=>{if(o.value="",h(String(a.value).split(""),3).map(r=>r.join("")).map(r=>{o.value+=`${r}${a.separator}`}),o.value=o.value.slice(0,o.value.length-1),a.precision>0){o.value+=".";for(let r=0;r<a.precision;r++)o.value+="0"}};return e.onMounted(()=>{if(a.animation){let n={startVal:0,duration:a.animationDuration/1e3,separator:a.separator,decimalPlaces:a.precision};t.value=new g(`cc-statistic-${s}`,a.value,n),a.start&&t.value.start()}else l()}),e.watch(()=>a.value,()=>{a.animation?t.value.start():l()}),e.watch(()=>a.start,n=>{n&&t.value.start()}),(n,u)=>{const r=e.resolveComponent("el-skeleton-item"),c=e.resolveComponent("el-skeleton");return e.openBlock(),e.createElementBlock("div",y,[e.createElementVNode("div",_,[i.title?(e.openBlock(),e.createElementBlock("span",v,e.toDisplayString(i.title),1)):e.createCommentVNode("v-if",!0),e.createElementVNode("span",null,[e.renderSlot(n.$slots,"title",{},void 0,!0)])]),e.createElementVNode("div",null,[e.createElementVNode("span",null,[e.renderSlot(n.$slots,"prefix",{},void 0,!0)]),i.loading?(e.openBlock(),e.createBlock(c,{key:0,rows:1,animated:""},{template:e.withCtx(()=>[e.createVNode(r,{variant:"p",style:{width:"15%"}})]),_:1})):(e.openBlock(),e.createElementBlock("span",{key:1,class:"cc-statistic-value",id:`cc-statistic-${e.unref(s)}`},e.toDisplayString(o.value),9,F)),e.createElementVNode("span",null,[e.renderSlot(n.$slots,"suffix",{},void 0,!0)])]),e.createElementVNode("div",N,[i.extra?(e.openBlock(),e.createElementBlock("span",A,e.toDisplayString(i.extra),1)):e.createCommentVNode("v-if",!0),e.createElementVNode("span",null,[e.renderSlot(n.$slots,"extra",{},void 0,!0)])])])}}}),[["__scopeId","data-v-bbf9d746"]]),x={install(i){i.component("cc-statistic",k)}};return x});