uv-ui/lib/components/circle-progress/circle-progress.cjs

基于vue3的移动端组件库

"use strict";const e=require("vue"),u=require("../../utils/type.cjs"),$=require("../../hooks/useRequestAnimationFrame.cjs");require("../../hooks/useCountDown.cjs");require("./circle-progress.vue_vue_type_style_index_0_lang.cjs");const b=["viewBox"],w={key:0},A=["offset","stop-color"],F=["d"],N=["d"],j={class:"uv-circle-progress-text"},M={name:"UvCircleProgress"},q=Object.assign(M,{props:{size:{type:[String,Boolean]},text:{type:String,default:""},strokeWidth:{type:[String,Number],default:40},startPosition:{type:String,default:"top"},color:{type:[String,Object],default:"#1989fa"},layerColor:{type:String},fill:{type:String,default:"none"},clockwise:{type:Boolean,default:!0},strokeLinecap:{type:String,default:"round"},currentRate:{type:Number},rate:{type:[Number,String],default:100},speed:{type:[Number,String],default:0}},emits:["update:currentRate"],setup(a,{emit:d}){const t=a,{requestAnimationFrame:p,cancelAnimationFrame:k}=$.useRequestAnimationFrame();let E=0;const m=`uv-circle-${E++}`;function v(o,r){const s=o?1:0;return`M ${r/2} ${r/2} m 0, -500 a 500, 500 0 1, ${s} 0, 1000 a 500, 500 0 1, ${s} 0, -1000`}const l=e.computed(()=>+t.strokeWidth+1e3),f=e.computed(()=>v(t.clockwise,l.value)),R=e.computed(()=>{const r={top:0,right:90,bottom:180,left:270}[t.startPosition];return r?{transform:`rotate(${r}deg)`}:{transform:"rotate(0deg)"}}),S=e.computed(()=>u.isObject(t.color)?Object.keys(t.color).sort((o,r)=>parseFloat(o)-parseFloat(r)):[]),_=e.computed(()=>({fill:t.fill,stroke:t.layerColor,strokeWidth:t.strokeWidth+"px"})),x=e.computed(()=>{const{strokeWidth:r,currentRate:s,strokeLinecap:n}=t,c=3140*s/100;return{stroke:u.isObject(t.color)?`url(#${m})`:t.color,strokeLinecap:n,strokeWidth:`${+r+1}px`,strokeDasharray:`${c}px ${3140}px`}}),y=o=>Math.min(Math.max(+o,0),100);return e.watch(()=>t.rate,o=>{let r;const s=Date.now(),n=t.currentRate,c=y(o),g=Math.abs((n-c)*1e3/+t.speed),h=()=>{const B=Date.now(),i=Math.min((B-s)/g,1)*(c-n)+n;d("update:currentRate",y(parseFloat(i.toFixed(1)))),(c>n?i<c:i>c)&&(r=p(h))};t.speed?(r&&k(r),r=p(h)):d("update:currentRate",c)},{immediate:!0}),(o,r)=>(e.openBlock(),e.createElementBlock("div",{class:"uv-circle-progress",style:e.normalizeStyle({width:a.size+"px",height:a.size+"px"})},[(e.openBlock(),e.createElementBlock("svg",{class:"uv-circle-progress-svg",viewBox:`0 0 ${e.unref(l)} ${e.unref(l)}`,style:e.normalizeStyle(e.unref(R))},[e.unref(u.isObject)(a.color)?(e.openBlock(),e.createElementBlock("defs",w,[e.createElementVNode("linearGradient",{id:m,x1:"100%",y1:"0%",x2:"0%",y2:"0%"},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(S),(s,n)=>(e.openBlock(),e.createElementBlock("stop",{key:n,offset:s,"stop-color":a.color[s]},null,8,A))),128))])])):e.createCommentVNode("",!0),e.createElementVNode("path",{class:"uv-circle-progress-layer",style:e.normalizeStyle(e.unref(_)),d:e.unref(f)},null,12,F),e.createElementVNode("path",{class:"uv-circle-progress-hover",style:e.normalizeStyle(e.unref(x)),d:e.unref(f)},null,12,N)],12,b)),e.renderSlot(o.$slots,"default",{},()=>[e.createElementVNode("div",j,e.toDisplayString(a.text),1)])],4))}});module.exports=q;