Adam / gulu-vue

Blame view

src/components/UniSliper/UniSliper.vue 6.42 KB
edit raw normal view history
7d9acd27a   尹聃   选购页 
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
168
169
 
  <template>
    <div class="c-progress">
      <div class="c-progress-outer" :style="setProgressBgStyle" ref="progress">
        <div class="c-progress-inner" :style="setProgressStyle"></div>
        <div v-if="showSlider" class="c-progress-slider" ref="slider" :style="setSliderStyle"></div>
      </div>
      <span v-if="showPerText">{{stand_width}}mm</span>
    </div>
  </template>
  
  <script>
      // 使用了element的颜色
      const colorTable = {
          success: '#13ce66',
          fail: '#ff4949',
          warning: '#e6a23c',
          default: '#409EFF'
      }
      export default {
          name: 'CProgress',
          props: {
              percent: {
                  type: Number,
                  default: 60
              },
              showSlider: {
                  type: Boolean,
                  default: true
              },
              showPerText: {
                  type: Boolean,
                  default: true
              },
              // 进度条的宽度
              width: {
                  type: Number,
                  default: 300
              },
              bgColor: {
                  type: String,
                  default: '#ebeef5'
              },
              progressColor: {
                  type: String,
                  default: '#409EFF'
              },
              // 滑块的宽度
              sliderWidth: {
                  type: Number,
                  default: 20
              },
              // 颜色的类型
              type: {
                  type: String,
                  default: colorTable.default
              },
              //规格长度
              standard:{
                  type: Number,
                  default: 1.4
              },
              //初始长度
              stand_width:{
                  type: Number,
                  default: 0
              }   
          },
          data () {
              return {
                  sliderLeft: 0, // 滑块相对父元素发x坐标
                  progressWidth: 0, // 进度条当前的的宽度
                  tempPercent: 0,
              }
          },
          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 {
c4c4f1251   尹聃   修改镜框选购页 
170
 
      $width: 400rpx;
7d9acd27a   尹聃   选购页 
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
 
      $radius: 5px;
      display: flex;
      align-items: center;
      
      span {
        margin-left: 5px;
        font-size: 14px;
        color: #666;
      }
      
      .c-progress-outer {
        width: $width;
        height: 10px;
        background: #ebeef5;
        position: relative;
        display: flex;
        align-items: center;
        
        .c-progress-inner {
c4c4f1251   尹聃   修改镜框选购页 
190
 
          width: 100rpx;
7d9acd27a   尹聃   选购页 
191
 
          height: 10px;
c4c4f1251   尹聃   修改镜框选购页 
192
 
          background: #FF6B4A ;
7d9acd27a   尹聃   选购页 
193
194
195
196
197
198
199
 
        }
        
        .c-progress-slider {
          width: 20px;
          height: 20px;
          border-radius: 50%;
          background: #fff;
c4c4f1251   尹聃   修改镜框选购页 
200
 
          border: 1px solid #FF6B4A ;
7d9acd27a   尹聃   选购页 
201
202
203
204
205
206
207
 
          position: absolute;
          z-index: 10;
          left: 10px;
        }
      }
    }
  </style>