UniSliper.vue
5.55 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
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
<template>
<div class="c-progress">
<div class="c-progress-outer" :style="setProgressBgStyle" ref="progress">
<div class="c-progress-inner"
v-bind:style="{width: inner_width+'rpx'}"
></div>
<!-- <div v-if="showSlider" class="c-progress-slider" ref="slider" :style="setSliderStyle"></div> -->
</div>
<span v-if="showPerText">{{content}}mm</span>
</div>
</template>
<script>
// 使用了element的颜色
const colorTable = {
success: '#13ce66',
fail: '#ff4949',
warning: '#e6a23c',
default: '#409EFF'
}
export default {
name: 'CProgress',
props: {
//inner的长度
inner_widthProp: Number,
//调用接口的值
contentProp: String
},
data () {
return {
inner_width: this.inner_widthProp,
content: this.contentProp
}
},
computed: {
// 设置进度条的背景样式
setProgressBgStyle () {
return {
// 加上滑块的宽度
width: `${this.width + this.sliderWidth}px`
}
},
// 设置进度条的样式
setProgressStyle () {
const color = colorTable[this.type] || this.progressColor
return {
width: `${this.progressWidth}px`,
background: color
}
},
// 设置滑块的样式
setSliderStyle () {
const color = colorTable[this.type] || this.progressColor
return {
border: `1px solid ${color}`,
width: `${this.sliderWidth}px`,
height: `${this.sliderWidth}px`,
left: `${this.sliderLeft}px`
}
}
},
mounted () {
this.sliderLeft = this.width / 100 * this.percent
this.progressWidth = this.sliderLeft + this.sliderWidth // 滑块的x坐标加上滑块的宽度
this.tempPercent = this.percent
// this.addListener()
},
// methods: {
// addListener () {
// const slider = this.$refs.slider
// const progress = this.$refs.progress
// let isClickSlider = false
// let distance = 0 // 滑块与点击坐标的绝对距离
// progress.onclick = (e) => {
// // 阻止事件冒泡
// if (e.target == slider) {
// return
// }
// let curX = progress.offsetLeft
// this.sliderLeft = e.pageX - curX
// if (this.sliderLeft <= 0) {
// this.sliderLeft = 0
// }
// if (this.sliderLeft >= this.width) {
// this.sliderLeft = this.width
// }
// this._countCurPercent()
// }
// // slider.onmousedown = (e) => {
// // isClickSlider = true
// // let curX = slider.offsetLeft
// // distance = e.pageX - curX // 得出绝对距离
// // }
// progress.onmousemove = (e) => {
// if (isClickSlider) {
// // 判断是否已经超出进度条的长度
// if ((e.pageX - distance) >= 0 && (e.pageX - distance) <= (this.width - 0)) {
// this.sliderLeft = e.pageX - distance
// this._countCurPercent()
// }
// }
// }
// progress.onmouseup = () => {
// isClickSlider = false
// }
// },
// // 算出百分比
// _countCurPercent () {
// this.tempPercent = Math.ceil(parseInt(this.sliderLeft / this.width * 100))
// this.progressWidth = this.sliderLeft + 20
// // 取整的时候宽度可能不为0，所以在0和100的时候也将宽度取整
// if (this.tempPercent <= 0) {
// this.progressWidth = 0
// this.sliderLeft = 0
// }
// if (this.tempPercent >= 100) {
// this.progressWidth = this.width + 20
// this.sliderLeft = this.width
// }
// this.stand_width = this.tempPercent*this.standard
// this.stand_width = parseInt(this.stand_width/1) //取整
// this.$emit('percentChange', this.tempPercent)
// }
// }
}
</script>
<style scoped lang="scss">
.c-progress {
$width: 300px;
$radius: 5px;
display: flex;
align-items: center;
span {
margin-left: 5px;
font-size: 14px;
color: #666;
}
.c-progress-outer {
width: 420rpx;
height: 10px;
background: #ebeef5;
position: relative;
display: flex;
align-items: center;
.c-progress-inner {
width: 300rpx;
height: 10px;
background: #FF6B4A ;
}
.c-progress-slider {
width: 20px;
height: 20px;
border-radius: 50%;
background: #fff;
border: 1px solid #FF6B4A ;
position: absolute;
z-index: 10;
left: 10px;
}
}
}
</style>