eeeeeeuuuu-ui/uview-ui/components/u-circle-progress/u-circle-progress.js

uView UI，是uni-app生态优秀的UI框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水

require('../../../app.js');
(global["webpackJsonp"]=global["webpackJsonp"]||[]).push([["uview-ui/components/u-circle-progress/u-circle-progress"],{"0e36":function(e,t,r){},"7a9d":function(e,t,r){"use strict";var i;r.r(t);var s,o=function(){var e=this,t=e.$createElement;e._self._c},n=[],a=r("95a2"),c=a["a"],l=(r("e2c8"),r("f0c5")),d=Object(l["a"])(c,o,n,!1,null,"23ebb499",null,!1,i,s);t["default"]=d.exports},"95a2":function(e,t,r){"use strict";(function(e){t["a"]={name:"u-circle-progress",props:{percent:{type:Number,default:0,validator:e=>e>=0&&e<=100},inactiveColor:{type:String,default:"#ececec"},activeColor:{type:String,default:"#19be6b"},borderWidth:{type:[Number,String],default:14},width:{type:[Number,String],default:200},duration:{type:[Number,String],default:1500},type:{type:String,default:""},bgColor:{type:String,default:"#ffffff"}},data(){return{elBgId:"uCircleProgressBgId",elId:"uCircleProgressElId",widthPx:e.upx2px(this.width),borderWidthPx:e.upx2px(this.borderWidth),startAngle:-Math.PI/2,progressContext:null,newPercent:0,oldPercent:0}},watch:{percent(e,t=0){e>100&&(e=100),e<0&&(t=0),this.newPercent=e,this.oldPercent=t,setTimeout(()=>{this.drawCircleByProgress(t)},50)}},created(){this.newPercent=this.percent,this.oldPercent=0},computed:{circleColor(){return["success","error","info","primary","warning"].indexOf(this.type)>=0?this.$u.color[this.type]:this.activeColor}},mounted(){setTimeout(()=>{this.drawProgressBg(),this.drawCircleByProgress(this.oldPercent)},50)},methods:{drawProgressBg(){let t=e.createCanvasContext(this.elBgId,this);t.setLineWidth(this.borderWidthPx),t.setStrokeStyle(this.inactiveColor),t.beginPath();let r=this.widthPx/2;t.arc(r,r,r-this.borderWidthPx,0,2*Math.PI,!1),t.stroke(),t.draw()},drawCircleByProgress(t){let r=this.progressContext;r||(r=e.createCanvasContext(this.elId,this),this.progressContext=r),r.setLineCap("round"),r.setLineWidth(this.borderWidthPx),r.setStrokeStyle(this.circleColor);let i=Math.floor(this.duration/100),s=2*Math.PI/100*t+this.startAngle;r.beginPath();let o=this.widthPx/2;if(r.arc(o,o,o-this.borderWidthPx,this.startAngle,s,!1),r.stroke(),r.draw(),this.newPercent>this.oldPercent){if(t++,t>this.newPercent)return}else if(t--,t<this.newPercent)return;setTimeout(()=>{this.drawCircleByProgress(t)},i)}}}}).call(this,r("543d")["default"])},e2c8:function(e,t,r){"use strict";var i=r("0e36"),s=r.n(i);s.a}}]);
;(global["webpackJsonp"] = global["webpackJsonp"] || []).push([
    'uview-ui/components/u-circle-progress/u-circle-progress-create-component',
    {
        'uview-ui/components/u-circle-progress/u-circle-progress-create-component':(function(module, exports, __webpack_require__){
            __webpack_require__('543d')['createComponent'](__webpack_require__("7a9d"))
        })
    },
    [['uview-ui/components/u-circle-progress/u-circle-progress-create-component']]
]);