脚本宝典收集整理的这篇文章主要介绍了

基于vue的svg进度条组件

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <h1 id="articleHeader0">svg-progress-bar</h1> <blockquote><p>基于<a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>.js的简单的svg进度条</p></blockquote> <p><a href="https://www.npmjs.com/package/svg-progress-bar" rel="nofollow noreferrer" target="_blank"><span class="img-wrap"><img data-src="/img/remote/1460000012821196" src="/img/remote/1460000012821196" alt="Build Status" title="Build Status" style="cursor: pointer; display: inline;"></span><span class="img-wrap"><img data-src="/img/remote/1460000012821197" src="/img/remote/1460000012821197" alt="LICENSE MIT" title="LICENSE MIT" style="cursor: pointer; display: inline;"></span></a> <span class="img-wrap"><img data-src="/img/remote/1460000012821198" src="/img/remote/1460000012821198" alt="" title="" style="cursor: pointer; display: inline;"></span></p> <p><span class="img-wrap"><img data-src="/img/bV1Xys?w=440&amp;h=220" src="/img/bV1Xys?w=440&amp;h=220" alt="u=2176389216,1520905711&amp;fm=27&amp;gp=0.jpg" title="u=2176389216,1520905711&amp;fm=27&amp;gp=0.jpg" style="cursor: pointer; display: inline;"></span></p> <ul> <li><a href="https://chenxuan0000.github.io/component-document/index_prod.html#/component/svg-bar-default" rel="nofollow noreferrer" target="_blank">?在线demo1</a></li> <li><a href="https://chenxuan0000.github.io/svg-progress-bar/" rel="nofollow noreferrer" target="_blank">?在线demo2</a></li> </ul> <h2 id="articleHeader1">svg-progress-bar是什么?</h2> <p><code>svg-progress-bar</code> 是一款基于 <a href="https://github.com/lugolabs/circles" rel="nofollow noreferrer" target="_blank">circles</a>项目二次开发的vue组件</p> <h2 id="articleHeader2">功能特性</h2> <ul> <li>[x] 零依赖,体积小</li> <li>[x] 目前支持圆环/矩形的进度条</li> <li>[x] 配置多满足多样需求</li> <li>[x] 持续维护</li> </ul> <h2 id="articleHeader3">安装</h2> <h3 id="articleHeader4">NPM</h3> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="npm install svg-progress-bar --save" title="" data-original-title="复制"></span> </div> </p></div> <pre class="bash hljs"><code class="bash" style="word-break: break-word; white-space: initial;">npm <a href="http://www.js-code.com/tag/in" title="浏览关于“in”的文章" target="_blank" class="tag_link">in</a>st<a href="http://www.js-code.com/tag/all" title="浏览关于“all”的文章" target="_blank" class="tag_link">all</a> svg-progress-bar --save</code></pre> <h2 id="articleHeader5">使用</h2> <h3 id="articleHeader6">ES6</h3> <blockquote><p>详细介绍 <a href="https://github.com/chenxuan0000/svg-progress-bar/blob/master/examples-src/App.vue" rel="nofollow noreferrer" target="_blank">example-src/App.vue</a> </p></blockquote> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="import Vue from 'vue' import vueProgressBar from 'svg-progress-bar' new Vue({ components: { vueProgressBar } })" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js"><span class="hljs-keyword">import</span> <a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a> <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span> <span class="hljs-keyword">import</span> vueProgressBar <span class="hljs-keyword">from</span> <span class="hljs-string">'svg-progress-bar'</span> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/new" title="浏览关于“new”的文章" target="_blank" class="tag_link">new</a></span> Vue({ <span class="hljs-attr">components</span>: { vueProgressBar } })</code></pre> <h3 id="articleHeader7">普通模式 (script引入 )</h3> <p>例子:</p> <blockquote><p>详细介绍 <a href="https://github.com/chenxuan0000/svg-progress-bar/blob/master/test/test.html" rel="nofollow noreferrer" target="_blank">test/test.html</a> </p></blockquote> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="<a href="http://www.js-code.com/tag/button" title="button" target="_blank">button</a>" <a href="http://www.js-code.com/tag/class" title="class" target="_blank">class</a>="copyCode code-tool" data-toggle="tooltip" data-placement="<a href="http://www.js-code.com/tag/top" title="top" target="_blank">top</a>" data-clipboard-<a href="http://www.js-code.com/tag/text" title="text" target="_blank">text</a>="<html><br /> <head><br /> ...<br /> </head><br /> <body></p> <div id=&quot;app&quot;> <svg-progress-bar></svg-progress-bar> </div> <p> <script src=&quot;vue.js&quot;></script><br /> <script src=&quot;svg-progress-bar&quot;></script><br /> <script> <a href="http://www.js-code.com/tag/new" title="new" target="_blank">new</a> <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>({ el: '#app' }) </script><br /> </body><br /> </html>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html"><span class="hljs-tag">&lt;<span class="hljs-name">html</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span> ... <span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name"><a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a></span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">svg-progress-bar</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">svg-progress-bar</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"vue.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"svg-progress-bar"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="actionscript"> <span class="hljs-keyword">new</span> Vue({ el: <span class="hljs-string">'#app'</span> }) </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span></code></pre> <h2 id="articleHeader8">配置参数</h2> <div class="table-wrap"> <table> <thead> <tr> <th align="left">key</th> <th>description</th> <th><a href="http://www.js-code.com/tag/default" title="default" target="_blank">default</a></th> <th>val</th> </tr> </thead> <tbody> <tr> <td align="left"><code>type</code></td> <td>进度条类型</td> <td><code>'circle'</code></td> <td> <code>'circle'</code> <code>'rect'</code> </td> </tr> <tr> <td align="left"><code>value</code></td> <td>进度条的初始值</td> <td><code>0</code></td> <td> <code><a href="http://www.js-code.com/tag/Number" title="Number" target="_blank">Number</a></code> <code>Str<a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a>g</code> </td> </tr> <tr> <td align="left"><code><a href="http://www.js-code.com/tag/option" title="option" target="_blank">option</a>s</code></td> <td>进度条的<a href="http://www.js-code.com/tag/option" title="option" target="_blank">option</a>s对象参数</td> <td><code>{}</code></td> <td><code><a href="http://www.js-code.com/tag/Object" title="Object" target="_blank">Object</a></code></td> </tr> <tr> <td align="left"><code><a href="http://www.js-code.com/tag/option" title="浏览关于“option”的文章" target="_blank" class="tag_link">option</a>s.radius</code></td> <td>环形进度条半径</td> <td><code>50</code></td> <td><code><a href="http://www.js-code.com/tag/Number" title="Number" target="_blank">Number</a></code></td> </tr> <tr> <td align="left"><code>options.circleWidth</code></td> <td>环形进度条线宽</td> <td><code>10</code></td> <td><code><a href="http://www.js-code.com/tag/Number" title="浏览关于“Number”的文章" target="_blank" class="tag_link">Number</a></code></td> </tr> <tr> <td align="left"><code>options.circleWidth<a href="http://www.js-code.com/tag/array" title="Array" target="_blank">Array</a></code></td> <td>如果你想要不等宽的环形条可以设置环形进度条线宽度组</td> <td><code><a href="http://www.js-code.com/tag/null" title="null" target="_blank">null</a></code></td> <td><code><a href="http://www.js-code.com/tag/Array" title="Array" target="_blank">Array</a></code></td> </tr> <tr> <td align="left"><code>options.circleL<a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a>ecap</code></td> <td>环形进度条的边角形状</td> <td><code>''</code></td> <td><code>'round',''</code></td> </tr> <tr> <td align="left"><code>options.maxValue</code></td> <td>进度条的最大值</td> <td><code>100</code></td> <td><code>Number</code></td> </tr> <tr> <td align="left"><code>options.<a href="http://www.js-code.com/tag/text" title="text" target="_blank">text</a></code></td> <td>进度条的文本格式</td> <td><code><a href="http://www.js-code.com/tag/function" title="function" target="_blank">function</a> (value) {<a href="http://www.js-code.com/tag/return" title="return" target="_blank">return</a> <a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.html<a href="http://www.js-code.com/tag/if" title="if" target="_blank">if</a>yNumber(value)}</code></td> <td><code>Function</code></td> </tr> <tr> <td align="left"><code>options.<a href="http://www.js-code.com/tag/text" title="浏览关于“text”的文章" target="_blank" class="tag_link">text</a>Color</code></td> <td>进度条的文本颜色</td> <td><code>#000</code></td> <td><code>color</code></td> </tr> <tr> <td align="left"><code>options.pathColors</code></td> <td>进度条填充的颜色队列</td> <td><code>['#EEE', '#F00']</code></td> <td><code><a href="http://www.js-code.com/tag/array" title="Array" target="_blank">Array</a></code></td> </tr> <tr> <td align="left"><code>options.gradientColor</code></td> <td>进度条填充的渐变色</td> <td><code><a href="http://www.js-code.com/tag/null" title="null" target="_blank">null</a></code></td> <td><code><a href="http://www.js-code.com/tag/Array" title="Array" target="_blank">Array</a></code></td> </tr> <tr> <td align="left"><code>options.gradientOpacity</code></td> <td>进度条填充的渐变色透明度</td> <td><code>[1,1]</code></td> <td><code><a href="http://www.js-code.com/tag/array" title="浏览关于“Array”的文章" target="_blank" class="tag_link">Array</a></code></td> </tr> <tr> <td align="left"><code>options.duration</code></td> <td>进度条的动画时间</td> <td><code>500</code></td> <td><code>Number</code></td> </tr> <tr> <td align="left"><code>options.rectWidth</code></td> <td>矩形进度条的宽度</td> <td><code>400</code></td> <td><code>Number</code></td> </tr> <tr> <td align="left"><code>options.rectHeight</code></td> <td>矩形进度条的高度</td> <td><code>40</code></td> <td><code>Number</code></td> </tr> <tr> <td align="left"><code>options.rectRadius</code></td> <td>矩形进度条的圆角度</td> <td><code>0</code></td> <td><code>Number</code></td> </tr> <tr> <td align="left"><code>options.valAddCalBack</code></td> <td>进度条value变化对应节点的回调事件</td> <td><code>[]</code></td> <td><code>[{value: 20,func: () =&gt; {<a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.<a href="http://www.js-code.com/tag/do" title="do" target="_blank">do</a>tValArr.per20 = 20}},{value: 40,func: () =&gt; {<a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.<a href="http://www.js-code.com/tag/do" title="do" target="_blank">do</a>tValArr.per40 = 40}}]</code></td> </tr> </tbody> </table> </div> <h2 id="articleHeader9">TKS</h2> <p><a href="https://github.com/chenxuan0000/svg-progress-bar" rel="nofollow noreferrer" target="_blank">svg-progress-bar</a>发现bug或者有什么不足望指点,感觉不错点个star吧。</p> <p></code></p>

总结

以上是脚本宝典为你收集整理的

基于vue的svg进度条组件

全部内容,希望文章能够帮你解决

基于vue的svg进度条组件

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过