css系列：进度条

前言

技术来源于需求，近期遇到了做语音的需求，有个调解语速和音量的进度条，UI组件库的进度条大部分不支持拖动和点击修改当前进度，以是自己手写了一个。
实现思绪

MDN文档介绍
<input type="range"> - HTML（超文本标记语言） | MDN
input中type为range为进度条，然后做一些样式的修改和功能的加工封装为组件。
代码

1. <template>
2.   <div class="progress-container">
3.     <!-- 原生进度条，底部完整进度条部分 -->
4.     <input type="range" min="0" max="100" :value="currentProgress" :class="[rangeClass, 'silder']" />
5.     <!-- 自我实现样式，当前进度部分 -->
6.     <div :class="[progressClass,'progress-bar']"></div>
7.   </div>
8. </template>
10. <script>
11. export default {
12.   props: {
13.     // 一个页面用到多个此进度条组件的话要注意多个组件的类名要不同
14.     // 灰色的整个进度条的类名
15.     rangeClass: {
16.       type: String,
17.       default: "progress-range"
18.     },
19.     // 蓝色高亮的进度条的类名
20.     progressClass: {
21.       type: String,
22.       default: "progress-bar"
23.     },
24.     // 当前进度
25.     currentProgress: {
26.       type: Number,
27.     }
28.   },
29.   mounted () {
30.     const silder = document.querySelector("." + this.rangeClass);
31.     const progressBar = document.querySelector("." + this.progressClass);
32.     let that = this
33.     // 略微有点问题，偶发性会不触发绑定事件
34.     silder.oninput = function () {
35.       // 用来实时改变当前进度的宽度
36.       progressBar.style.width = this.value + "%";
37.       that.$emit('input', Number(this.value))
38.     };
39.   }
40. };
41. </script>
43. <style lang="less" scoped>
44. // less变量
45. @height: 4px;
46. @color: #3370ff;
47. @borderRadius: 2px;
48. .progress-container {
49.   width: 100%;
50.   position: relative;
51.   margin-top: -3px;
52.   .silder {
53.     // -webkit是为了浏览器兼容
54.     // 移除input的默认样式，下面这位博主有详细介绍
55.     // https://blog.csdn.net/weixin_68127493/article/details/138463570
56.     -webkit-appearance: none;
57.     appearance: none;
58.     width: 100%;
59.     height: @height;
60.     background: rgba(0, 0, 0, 0.12);
61.     // 外边框，下面这位博主有详细介绍
62.     // https://blog.csdn.net/XiugongHao/article/details/131898375
63.     outline: none;
64.     // 透明度
65.     opacity: 0.7;
66.     // 过渡效果，下面这位博主有详细介绍
67.     // https://blog.csdn.net/qq_32594913/article/details/135915376
68.     -webkit-transition: 0.2s;
69.     transition: opacity 0.2s;
70.     border-radius: @borderRadius;
71.     // 鼠标移入时，透明度变为1
72.     &:hover {
73.       opacity: 1;
74.     }
75.     // 当前进度右侧尽头的圆圈，详细介绍参考以下网址
76.     // https://cloud.tencent.com/developer/section/1072011
77.     &::-moz-range-thumb {
78.       width: 25px;
79.       height: 25px;
80.       background: @color;
81.       cursor: pointer;
82.     }
83.   }
84.   //   当前进度部分的样式
85.   .progress-bar {
86.     position: absolute;
87.     top: 12px;
88.     width: 50%;
89.     height: @height;
90.     background: @color;
91.     border-radius: @borderRadius;
92.   }
93. }
94. </style>

复制代码

结语

样式部分为笔者需求的样式，需要根据自己项目需要调解。
！！有个标题是偶发性绑定事件不触发，暂时还没解决，欢迎各人帮忙解决。


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。