1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<template>
<div class="app-progress">
<el-progress
:percentage="currentVal"
:type="type"
:color="color"
:format="format"
:show-text="realShowText"
:stroke-width="parseInt(strokeWidth)"
></el-progress>
</div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
@Component({})
export default class AppProgress extends Vue {
/**
* 传入值
* @type {any}
* @memberof AppProgress
*/
@Prop() public value?: any;
/**
* 属性项名称
*
* @type {string}
* @memberof AppPicker
*/
@Prop() public name!: string;
/**
* 最小值
* @type {number}
* @memberof AppProgress
*/
@Prop({ default: 0 }) public min!: number;
/**
* 最大值
* @type {number}
* @memberof AppProgress
*/
@Prop({ default: 100 }) public max!: number;
/**
* 进度条类型
* @type {string}
* @memberof AppProgress
*/
@Prop({ default: "line" }) public type!: string;
/**
* 进度条当前状态
* @type {string}
* @memberof AppProgress
*/
@Prop({ default: "—" }) public status!: string;
/**
* 进度条背景色
* @type {string}
* @memberof AppProgress
*/
@Prop({ default: "" }) public color!: string;
/**
* 是否显示进度条文字内容
* @type {string}
* @memberof AppProgress
*/
@Prop({ default: 'true' }) public showText!: string;
/**
* 进度条的宽度，单位 px
* @type {number}
* @memberof AppProgress
*/
@Prop({ default: '6' }) public strokeWidth!: string;
/**
* 是否显示文本
*
* @memberof AppProgress
*/
get realShowText() {
if (this.showText) {
if (Object.is(this.showText,'false')) {
return false;
} else if (Object.is(this.showText,'true')) {
return true;
} else {
return Boolean(this.showText)
}
}
return true
}
/**
* 当前值（百分比形式）
*
* @memberof AppProgress
*/
get currentVal() {
if (this.value) {
let value = this.value === null ? 0 : parseInt(this.value);
return ((value - this.min) / (this.max - this.min)) * 100;
}
}
/**
* 指定进度条文字内容
*
* @memberof AppProgress
*/
public format(percentage: number) {
return this.value ? this.value + " (" + percentage.toFixed(0) + "%)" : "";
}
public mounted() {
if (this.color) {
let el: any = this.$el.getElementsByClassName("el-progress__text")[0];
if (el) {
el.style.color = this.color;
}
}
}
}
</script>