IT评测·应用市场-qidao123.com

标题: css系列：进度条 [打印本页]
作者: 嚴華    时间: 2024-6-13 15:39
标题: 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企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 IT评测·应用市场-qidao123.com (https://dis.qidao123.com/) Powered by Discuz! X3.4