1.2.6 • Published 2 years ago
evant-progress-bar v1.2.6
evant-progress-bar
vue2.x 基于vue2.x的进度条progress-bar支持滑动拖拽，点击的进度条;
属性说明
| props | 说明 | 类型 | 默认值 |
|---|---|---|---|
| placement | 进度数字显示的位置 | String类型; 可选值："top", "right" | top |
| min | 进度最小值 | Number | 0 |
| max | 进度最大值 | Number | 100 |
| value | v-model | Number | - |
| progressColor | 进度条颜色 | String | #409eff |
| progressBgColor | 进度条背景颜色 | String | #e4e7ed |
| thunkStyle | 重写滑块圆圈的样式 | Object | 例如：{'background': ''} |
| blockStyleObject | 重写滑块圆圈的内部block的样式 | Object | 例如：{'background': ''} |
方法
| 方法名称 | 说明 | - |
|---|---|---|
| getPercent | 获取进度值 | getPercent(value) |
插槽
| 插槽 | 位置 | - |
|---|---|---|
| icon | 左侧图标 | - |
使用说明
<template>
<evant-progress-bar
v-model="percent"
placement="right"
progressColor="red"
progressBgColor="yellow"
:thunkStyleObject="{'background-color': 'blue', 'border-radius': '50%'}"
:blockStyleObject="{'border': '1px solid red'}"
@getPercent="getPercent"
>
<!-- <template #icon>
<i class="icon-notice"></i>
</template>-->
</evant-progress-bar>
</template>
<script>
import EvantProgressBar from "evant-progress-bar"
export default {
components: { EvantProgressBar },
data() {
return {
percent: 20
}
},
methods: {
getPercent(value) {
console.log("当前进度值：", value)
}
}
}
</script>