vue-circle-liu
Version:
A Vue.js project
2 lines • 3.56 kB
JavaScript
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.VueScrollerLiu=e():t.VueScrollerLiu=e()}("undefined"!=typeof self?self:this,function(){return function(t){var e={};function n(r){if(e[r])return e[r].exports;var o=e[r]={i:r,l:!1,exports:{}};return t[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=t,n.c=e,n.d=function(t,e,r){n.o(t,e)||Object.defineProperty(t,e,{configurable:!1,enumerable:!0,get:r})},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="/",n(n.s=1)}([function(t,e,n){"use strict";e.a={data:function(){return{styles:{width:"100px",height:"100px"},path:"M 0 25 A 50 50 0 0 1 0 24",oldprecent:"",strokeWidth1:""}},props:{strokeColor:{type:String,default:"green"},strokeWidth:{type:Number,default:7},width:{type:Number,default:100},precent:{type:Number,default:0}},watch:{width:function(){"number"==typeof this.width&&this.width>0&&(this.styles.width=this.width+"px",this.styles.height=this.width+"px")},strokeWidth:{handler:function(t){this.strokeWidth1=t>10?10:t<1?1:t},immediate:!0},precent:function(){this.update(this.precent)}},mounted:function(){this.update(this.precent)},methods:{update:function(t){var e=this;if("number"==typeof t&&t>=0){console.log(0);var n=360/(100/(t>100?t%100:0===t?0:t%100==0?99:t)),r=n>180?1:0,o=parseInt(25-50*Math.sin(n*Math.PI/180)),i=parseInt(50-50*Math.cos(n*Math.PI/180));this.path="M 0 25 A 50 50 0 "+r+" 1 "+i+" "+o,""===this.oldprecent?this.oldprecent=t:this.oldprecent!==this.precent&&requestAnimationFrame(function(){e.update(e.oldprecent),e.oldprecent<e.precent?e.oldprecent++:e.oldprecent--})}}}}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var r=n(2);e.default=r.a},function(t,e,n){"use strict";var r=n(0),o=n(5);var i=function(t){n(3)},s=n(4)(r.a,o.a,!1,i,null,null);e.a=s.exports},function(t,e){},function(t,e){t.exports=function(t,e,n,r,o,i){var s,a=t=t||{},c=typeof t.default;"object"!==c&&"function"!==c||(s=t,a=t.default);var u,d="function"==typeof a?a.options:a;if(e&&(d.render=e.render,d.staticRenderFns=e.staticRenderFns,d._compiled=!0),n&&(d.functional=!0),o&&(d._scopeId=o),i?(u=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),r&&r.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(i)},d._ssrRegister=u):r&&(u=r),u){var p=d.functional,f=p?d.render:d.beforeCreate;p?(d._injectStyles=u,d.render=function(t,e){return u.call(e),f(t,e)}):d.beforeCreate=f?[].concat(f,u):[u]}return{esModule:s,exports:a,options:d}}},function(t,e,n){"use strict";var r={render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"circle"},[n("svg",{staticClass:"svg",style:t.styles,attrs:{xmlns:"http://www.w3.org/2000/svg",viewBox:"-25 -50 150 150"}},[n("path",{attrs:{d:"M 0 25 A 50 50 0 1 0 0 24",stroke:"gray","stroke-width":"0.5",fill:"none"}}),t._v(" "),n("path",{staticClass:"animate",attrs:{d:this.path,stroke:t.strokeColor,"stroke-width":t.strokeWidth1,fill:"none","stroke-linecap":"round"}}),t._v(" "),n("text",{attrs:{"font-family":"microsoft yahei","font-size":"20",y:"30",x:"50","text-anchor":"middle"}},[t._v(t._s(t.precent))])])])},staticRenderFns:[]};e.a=r}])});
//# sourceMappingURL=vue-circle-liu.min.js.map