uv-line-progress.vue
3.47 KB
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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<template>
<view
class="uv-line-progress"
:style="[$uv.addStyle(customStyle)]"
>
<view
class="uv-line-progress__background"
ref="uv-line-progress__background"
:style="[{
backgroundColor: inactiveColor,
height: $uv.addUnit($uv.getPx(height))
}]"
>
</view>
<view
class="uv-line-progress__line"
:style="[progressStyle]"
>
<slot>
<text v-if="showText && percentage >= 10" class="uv-line-progress__text">{{innserPercentage + '%'}}</text>
</slot>
</view>
</view>
</template>
<script>
import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
import props from './props.js';
// #ifdef APP-NVUE
const dom = uni.requireNativePlugin('dom')
// #endif
/**
* lineProgress 线型进度条
* @description 展示操作或任务的当前进度，比如上传文件，是一个线形的进度条。
* @tutorial https://www.uvui.cn/components/lineProgress.html
* @property {String} activeColor 激活部分的颜色 ( 默认 '#19be6b' )
* @property {String} inactiveColor 背景色 ( 默认 '#ececec' )
* @property {String | Number} percentage 进度百分比，数值 ( 默认 0 )
* @property {Boolean} showText 是否在进度条内部显示百分比的值 ( 默认 true )
* @property {String | Number} height 进度条的高度，单位px ( 默认 12 )
*
* @example <uv-line-progress :percent="70" :show-percent="true"></uv-line-progress>
*/
export default {
name: "uv-line-progress",
mixins: [mpMixin, mixin, props],
data() {
return {
lineWidth: 0,
}
},
watch: {
percentage(n) {
this.resizeProgressWidth()
}
},
computed: {
progressStyle() {
let style = {}
style.width = this.lineWidth
style.backgroundColor = this.activeColor
style.height = this.$uv.addUnit(this.$uv.getPx(this.height))
return style
},
innserPercentage() {
// 控制范围在0-100之间
return this.$uv.range(0, 100, this.percentage)
}
},
mounted() {
this.init()
},
methods: {
init() {
this.$uv.sleep(20).then(() => {
this.resizeProgressWidth()
})
},
getProgressWidth() {
// #ifndef APP-NVUE
return this.$uvGetRect('.uv-line-progress__background')
// #endif
// #ifdef APP-NVUE
// 返回一个promise
return new Promise(resolve => {
dom.getComponentRect(this.$refs['uv-line-progress__background'], (res) => {
resolve(res.size)
})
})
// #endif
},
resizeProgressWidth() {
this.getProgressWidth().then(size => {
const {
width
} = size
// 通过设置的percentage值，计算其所占总长度的百分比
this.lineWidth = width * this.innserPercentage / 100 + 'px'
})
}
}
}
</script>
<style lang="scss" scoped>
@import '@/uni_modules/uv-ui-tools/libs/css/components.scss';
.uv-line-progress {
align-items: stretch;
position: relative;
@include flex(row);
flex: 1;
overflow: hidden;
border-radius: 100px;
&__background {
background-color: #ececec;
border-radius: 100px;
flex: 1;
}
&__line {
position: absolute;
top: 0;
left: 0;
bottom: 0;
align-items: center;
@include flex(row);
color: #ffffff;
border-radius: 100px;
transition: width 0.5s ease;
justify-content: flex-end;
}
&__text {
font-size: 10px;
align-items: center;
text-align: right;
color: #FFFFFF;
margin-right: 5px;
transform: scale(0.9);
}
}
</style>