Слияние кода завершено, страница обновится автоматически
基于Vue.js的简单的svg进度条
 IE |
 Firefox |
 Chrome |
 Safari |
 iOS |
 Android |
|---|---|---|---|---|---|
| IE9+ | ✓ | ✓ | ✓ | ✓ | ✓ |
svg-progress-bar 是一款基于 circles项目二次开发的vue组件
npm install svg-progress-bar --save
详细介绍 example-src/App.vue
// **main.js**
// 1.全局 install
import Vue from 'vue'
import svg from 'svg-progress-bar'
// 你可以自己设置全局注册的组件名 默认注册的组件名是 svg-progress-bar
Vue.use(svg,{componentName: 'percent-bar'})
// 2.单个.vue文件局部注册
<script>
import svg from 'svg-progress-bar'
export default {
components: {
svg
}
}
</script>
例子:
详细介绍 test/test.html
<html>
<head>
...
</head>
<body>
<div id="app">
<svg-progress-bar></svg-progress-bar>
</div>
<script src="vue.js"></script>
<script src="svg-progress-bar"></script>
<script>
new Vue({
el: '#app'
})
</script>
</body>
</html>
| key | description | default | val |
|---|---|---|---|
type |
进度条类型 | 'circle' |
'circle' 'rect'
|
value |
进度条的初始值 | 0 |
Number String
|
valAddCalBack |
进度条value变化对应节点的回调事件 | [] |
[{value: 20,func: () => {this.dotValArr.per20 = 20}},{value: 40,func: () => {this.dotValArr.per40 = 40}}] |
options |
进度条的options对象参数 | {} |
Object |
options.radius |
环形进度条半径 | 50 |
Number |
options.valRate |
value每次增加的幅度(建议<=1) | 1 |
Number |
options.circleWidth |
环形进度条线宽 | 10 |
Number |
options.varyStrokeArray |
如果你想要不等宽的环形条或者柱形条可以设置宽度/高度组 | null |
Array |
options.circleLinecap |
环形进度条的边角形状 | '' |
'round','' |
options.maxValue |
进度条的最大值 | 100 |
Number |
options.text |
进度条的文本格式 | function (value) {return this.htmlifyNumber(value)} |
Function |
options.textColor |
进度条的文本颜色 | #000 |
color |
options.pathColors |
进度条填充的颜色队列 | ['#EEE', '#F00'] |
Array |
options.gradientColor |
进度条填充的渐变色 | null |
Array |
options.gradientOpacity |
进度条填充的渐变色透明度 | [1,1] |
Array |
options.duration |
进度条的动画时间 | 500 |
Number |
options.rectWidth |
矩形进度条的宽度 | 400 |
Number |
options.rectHeight |
矩形进度条的高度 | 40 |
Number |
options.rectRadius |
矩形进度条的圆角度 | 0 |
Number |
See the GitHub 历史版本.
svg-progress-bar is open source and released under the MIT License.
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Опубликовать ( 0 )