index.vue
2.7 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
<template>
<uni-shadow-root class="vant-dist-progress-index"><view class="van-progress custom-class" :style="computed.rootStyle({ strokeWidth, trackColor })">
<view class="van-progress__portion" :style="computed.portionStyle({ percentage, inactive, color })">
<view v-if="showPivot && computed.pivotText(pivotText, percentage)" :style="computed.pivotStyle({ textColor, pivotColor, inactive, color, right })" class="van-progress__pivot">
{{ computed.pivotText(pivotText, percentage) }}
</view>
</view>
</view></uni-shadow-root>
</template>
<wxs src="../wxs/utils.wxs" module="utils"></wxs><wxs src="./index.wxs" module="computed"></wxs>
<script>
global['__wxRoute'] = 'vant/dist/progress/index'
import { VantComponent } from '../common/component';
import { BLUE } from '../common/color';
import { getRect } from '../common/utils';
VantComponent({
props: {
inactive: Boolean,
percentage: {
type: Number,
observer: 'setLeft',
},
pivotText: String,
pivotColor: String,
trackColor: String,
showPivot: {
type: Boolean,
value: true,
},
color: {
type: String,
value: BLUE,
},
textColor: {
type: String,
value: '#fff',
},
strokeWidth: {
type: null,
value: 4,
},
},
data: {
right: 0,
},
mounted() {
this.setLeft();
},
methods: {
setLeft() {
Promise.all([
getRect(this, '.van-progress'),
getRect(this, '.van-progress__pivot'),
]).then(([portion, pivot]) => {
if (portion && pivot) {
this.setData({
right: (pivot.width * (this.data.percentage - 100)) / 100,
});
}
});
},
},
});
export default global['__wxComponents']['vant/dist/progress/index']
</script>
<style platform="mp-weixin">
@import '../common/index.css';.van-progress{position:relative;height:4px;height:var(--progress-height,4px);border-radius:4px;border-radius:var(--progress-height,4px);background:#ebedf0;background:var(--progress-background-color,#ebedf0)}.van-progress__portion{position:absolute;left:0;height:100%;border-radius:inherit;background:#1989fa;background:var(--progress-color,#1989fa)}.van-progress__pivot{position:absolute;top:50%;box-sizing:border-box;min-width:3.6em;text-align:center;word-break:keep-all;border-radius:1em;-webkit-transform:translateY(-50%);transform:translateY(-50%);color:#fff;color:var(--progress-pivot-text-color,#fff);padding:0 5px;padding:var(--progress-pivot-padding,0 5px);font-size:10px;font-size:var(--progress-pivot-font-size,10px);line-height:1.6;line-height:var(--progress-pivot-line-height,1.6);background-color:#1989fa;background-color:var(--progress-pivot-background-color,#1989fa)}
</style>