代码改变世界

vue 的进度条组件

  muamaker  阅读(8815)  评论(0编辑  收藏  举报

先看效果:

要想实现如上图的,进度跳效果,有两种方式,首先介绍第一种:

1、自己用 div 写一个,代码如下

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
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
<template>
    <div class="mfc-slider-runway" ref="runway">
        <div class="mfc-slider-bar" :style="{width:w}"></div>
        <div class="mfc-slider-button-wrap" :style="{left:w}"  ref="thumb">
            <div class="mfc-slider-button" ></div>
        </div>
    </div>
</template>
<script>
 //进度条组件
 export  default{
     props:{
         min:{  //最小值
             type:Number,
             default:0
         },
         max:{   //最大值
             type:Number,
             default:100
         },
         step:{      //每步的值为多少
             type:Number,
             default:1
         },
         value:{    // v-model  的初始值
             type:Number,
             default:0
         }
     },
     data(){
         return {
             startX:0,
             moveRun:false,
             maxWidth:0,
             left:0
         };
     },
     computed:{
       w(){
           var  maxWidth = this.maxWidth ;
           if( !maxWidth){
                return 0;
           }
 
           if(this.min > this.value){
               this.value = this.min;
               this.$emit("input"this.value);
           }
           if(this.max < this.value){
               this.value = this.max;
               this.$emit("input"this.value);
           }
 
           var s =   ((this.value - this.step - this.min) / (this.max - this.min))*maxWidth;  //上限
           var e = ((this.value + this.step- this.min ) / (this.max - this.min))*maxWidth;  //下限
           var left = this.left;
           if(left < s || left > e){
               //说明value 的值,与 left 容差太大,需要调和,用于外部的 v-model 初始化
               console.log("计算容差---");
               left =  ( (this.value- this.min )/ (this.max - this.min))*maxWidth;
           }
           return  (left / maxWidth)*100  + "%";
       }
     },
     mounted(){
         var $thumb = $(this.$refs.thumb);
         $thumb.on("mousedown",this.mousedown.bind(this));
         $(window).on("mouseup",this.mouseup.bind(this));
         this.maxWidth = $(this.$refs.runway).width();  //总共要走的 px 像素
 
 
         var value = this.value
         if(this.min > value){
             value = this.min;
         }
         if(this.max < value){
             value = this.max;
         }
         this.$emit("input",  value);
     },
     methods:{
         mousedown(e){
             e.preventDefault();
             e.stopPropagation();
             this.startX =   e.clientX ;
             this.moveRun = true;
             $(window).on("mousemove",this.mousemove.bind(this))
         },
         mouseup(e){
             this.moveRun = false;
             $(window).off("mousemove",this.mousemove.bind(this))
         },
         mousemove(e){
             e.preventDefault();
             e.stopPropagation();
             if(this.moveRun){
                 var x = e.clientX;
                 var startX = this.startX;
                 this.slide(startX,x);
                 this.startX = x;
             }
         },
         slide(start,end){
             var miss = end - start;
             if(miss == 0){
                 return ;
             }
             var maxWidth = $(this.$refs.runway).width();
             if(maxWidth == 0){
                return ;
             }
             var $thumb = $(this.$refs.thumb);
             this.offsetLeft =   $thumb.offset().left -  $thumb.position().left
             var left = end - this.offsetLeft;
 
             this.maxWidth = maxWidth;
            if(left < 0){
                left = 0;
            }
            if(left >  maxWidth){
                left  = maxWidth;
            }
 
            this.left = left;
             //----根据  step 的大小,换算出最终的 value 值
             var value = (left / maxWidth) * (this.max - this.min) + this.min;
             var v = Math.floor(value / this.step);
             value = v*this.step + Math.ceil(value  - v);
             if(this.min > value){
                 value = this.min;
             }
             if(this.max < value){
                 value = this.max;
             }
             this.$emit("input",value);
         }
     },
     destroyed(){
         $(this.$refs.thumb).off("mousedown",this.mousedown.bind(this));
         $(window).on("mouseup",this.mouseup.bind(this));
     }
 }
</script>
<style lang="less">
    div.mfc-slider-runway{
        width: 100%;
        height: 6px;
        margin: 10px 0;
        background-color: #e4e7ed;
        border-radius: 3px;
        position: relative;
        cursor: pointer;
        vertical-align: middle;
        div.mfc-slider-bar{
            height: 6px;
            background-color: #409eff;
            border-top-left-radius: 3px;
            border-bottom-left-radius: 3px;
            position: absolute;
            left: 0;
        }
        div.mfc-slider-button-wrap{
            height: 36px;
            width: 36px;
            text-align: center;
            position: absolute;
            z-index: 1001;
            top: -15px;
            transform: translateX(-50%) ;
            background-color: transparent;
            text-align: center;
            user-select: none;
            line-height: normal;
            div.mfc-slider-button{
                width: 16px;
                height: 16px;
                border: 2px solid #409eff;
                background-color: #fff;
                border-radius: 50%;
                transition: .2s;
                user-select: none;
                position: absolute;
                left: 0;
                right: 0;
                top:0;
                bottom: 0;
                margin: auto;
                &:hover{
                    transform: scale(1.2);
                    cursor: grab;
                 }
            }
        }
 
    }
</style>

  

 

使用:

1
2
3
4
5
6
7
8
import rangeSlide from "./component/range-slide.vue";
 
 
 
             <range-slide v-model="test"></range-slide>
             <div>
                 {{test}}
             </div>

  

2、可以使用 input 的新属性  type=range , 然后通过css修改样式

  css:

  

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
input[type=range] {
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  margin: 0;
  padding: 0 2px;
  /* Add some L/R padding to ensure box shadow of handle is shown */
  overflow: hidden;
  border: 0;
  border-radius: 1px;
  outline: none;
  background: -webkit-linear-gradient(#649efd, #649efd) no-repeat center;
  background: linear-gradient(#649efd, #649efd) no-repeat center;
  /* Use a linear gradient to generate only the 2px height background */
  background-size: 100% 2px;
  pointer-events: none;
  vertical-align: middle;
}
input[type=range]:active,
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-thumb {
  height: 18px;
  width: 18px;
  border-radius: 18px;
  background-color: #fff;
  position: relative;
  margin: 5px 0;
  /* Add some margin to ensure box shadow is shown */
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  pointer-events: all;
  box-shadow: 0 1px 4px 0.5px rgba(0, 0, 0, 0.25);
}
input[type=range]::-webkit-slider-thumb::before {
  content: ' ';
  display: block;
  position: absolute;
  top: 13px;
  left: 100%;
  width: 2000px;
  height: 2px;
}
.multi-range {
  position: relative;
  height: 32px;
}
.multi-range input[type=range] {
  position: absolute;
}
.multi-range input[type=range]:nth-child(1)::-webkit-slider-thumb::before {
  background-color: red;
}
.multi-range input[type=range]:nth-child(2) {
  background: none;
}
.multi-range input[type=range]:nth-child(2)::-webkit-slider-thumb::before {
  background-color: grey;
}

  

使用:

1
2
3
<div class="multi-range">
    <input type="range">
</div>

 

 

小结: 因为 input 的 range属性,兼容不是很好,所以,最好还是自己写,但是自己写会遇见很多坑,比如,value值和step的初始化设置,可能会将 value 设置为一个永远也取不到的值,比如 value初始化为 2 , step又为 5

 

 

编辑推荐:
· .NET 9 new features-C#13新的锁类型和语义
· Linux系统下SQL Server数据库镜像配置全流程详解
· 现代计算机视觉入门之:什么是视频
· 你所不知道的 C/C++ 宏知识
· 聊一聊 操作系统蓝屏 c0000102 的故障分析
阅读排行:
· 不到万不得已,千万不要去外包
· C# WebAPI 插件热插拔(持续更新中)
· 会议真的有必要吗?我们产品开发9年了,但从来没开过会
· 如何打造一个高并发系统?
· 【译】我们最喜欢的2024年的 Visual Studio 新功能
点击右上角即可分享
微信分享提示