刘文博 / gulu-vue

Blame view

src/components/UniSliper/UniSliper.vue 5.55 KB
edit raw normal view history
7d9acd27a   尹聃   选购页 
1
2
3
 
  <template>
    <div class="c-progress">
      <div class="c-progress-outer" :style="setProgressBgStyle" ref="progress">
8fdae7108   尹聃   完成镜框和太阳镜的选购页功能 
4
5
6
7
 
        <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> -->
7d9acd27a   尹聃   选购页 
8
 
      </div>
8fdae7108   尹聃   完成镜框和太阳镜的选购页功能 
9
 
      <span v-if="showPerText">{{content}}mm</span>
7d9acd27a   尹聃   选购页 
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
    </div>
  </template>
  
  <script>
      // 使用了element的颜色
      const colorTable = {
          success: '#13ce66',
          fail: '#ff4949',
          warning: '#e6a23c',
          default: '#409EFF'
      }
      export default {
          name: 'CProgress',
          props: {
8fdae7108   尹聃   完成镜框和太阳镜的选购页功能 
24
25
26
27
 
              //inner的长度
              inner_widthProp: Number,
              //调用接口的值
              contentProp: String
7d9acd27a   尹聃   选购页 
28
29
30
 
          },
          data () {
              return {
8fdae7108   尹聃   完成镜框和太阳镜的选购页功能 
31
32
 
                  inner_width: this.inner_widthProp,
                  content: this.contentProp
7d9acd27a   尹聃   选购页 
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
 
              }
          },
          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
8fdae7108   尹聃   完成镜框和太阳镜的选购页功能 
66
 
              // this.addListener()
7d9acd27a   尹聃   选购页 
67
 
          },
8fdae7108   尹聃   完成镜框和太阳镜的选购页功能 
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
 
          // 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)
          //     }
          // }
7d9acd27a   尹聃   选购页 
125
126
127
128
129
 
      }
  </script>
  
  <style scoped lang="scss">
    .c-progress {
8fdae7108   尹聃   完成镜框和太阳镜的选购页功能 
130
 
      $width: 300px;
7d9acd27a   尹聃   选购页 
131
132
133
134
135
136
137
138
139
140
141
 
      $radius: 5px;
      display: flex;
      align-items: center;
      
      span {
        margin-left: 5px;
        font-size: 14px;
        color: #666;
      }
      
      .c-progress-outer {
8fdae7108   尹聃   完成镜框和太阳镜的选购页功能 
142
 
        width: 420rpx;
7d9acd27a   尹聃   选购页 
143
144
145
146
147
148
149
 
        height: 10px;
        background: #ebeef5;
        position: relative;
        display: flex;
        align-items: center;
        
        .c-progress-inner {
8fdae7108   尹聃   完成镜框和太阳镜的选购页功能 
150
 
          width: 300rpx;
7d9acd27a   尹聃   选购页 
151
 
          height: 10px;
c4c4f1251   尹聃   修改镜框选购页 
152
 
          background: #FF6B4A ;
7d9acd27a   尹聃   选购页 
153
154
155
156
157
158
159
 
        }
        
        .c-progress-slider {
          width: 20px;
          height: 20px;
          border-radius: 50%;
          background: #fff;
c4c4f1251   尹聃   修改镜框选购页 
160
 
          border: 1px solid #FF6B4A ;
7d9acd27a   尹聃   选购页 
161
162
163
164
165
166
167
 
          position: absolute;
          z-index: 10;
          left: 10px;
        }
      }
    }
  </style>