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
| <template>
| <view class="cl-progress">
| <view class="cl-progress-bar" v-if="type === 'line'">
| <view
| class="cl-progress-bar__outer"
| :style="{ height: parseRpx(strokeWidth), backgroundColor: unColor }"
| >
| <view
| class="cl-progress-bar__inner"
| :style="{
| backgroundColor,
| width,
| }"
| ></view>
| </view>
| </view>
|
| <slot name="text">
| <view class="cl-progress__text" v-if="showText">
| <template v-if="!status">{{ value }}%</template>
| <text class="cl-progress__icon" v-else :class="icon"></text>
| </view>
| </slot>
| </view>
| </template>
|
| <script lang="ts">
| import { computed, defineComponent, type PropType } from "vue";
| import { parseRpx } from "/@/cool/utils";
| import { getCurrentColor } from "../../utils";
|
| export default defineComponent({
| name: "cl-progress",
|
| props: {
| // 绑定值
| value: {
| type: Number,
| default: 0,
| required: true,
| },
| // 类型
| type: {
| type: String,
| default: "line",
| },
| // 线条宽度
| strokeWidth: {
| type: Number,
| default: 12,
| },
| // 是否显示文本
| showText: {
| type: Boolean,
| default: true,
| },
| // 线条颜色, 支持多色
| color: {
| type: [String, Array] as PropType<string | string[]>,
| default: "",
| },
| // 未选中颜色
| unColor: {
| type: String,
| default: "#ebeef5",
| },
| // 状态
| status: Boolean,
| // 尾部图标
| icon: String,
| },
|
| setup(props) {
| // 宽度
| const width = computed(() => {
| if (props.value > 100) {
| return "100%";
| } else if (props.value < 0) {
| return 0;
| } else {
| return `${props.value}%`;
| }
| });
|
| // 背景颜色
| const backgroundColor = computed(() => {
| return getCurrentColor({
| value: props.value,
| color: props.color,
| max: 100,
| });
| });
|
| return {
| parseRpx,
| width,
| backgroundColor,
| };
| },
| });
| </script>
|
|
