css系列：进度条

前言

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

实现思路

MDN文档介绍

<input type="range"> - HTML（超文本标记语言） | MDN

input中type为range为进度条，然后做一些样式的修改和功能的加工封装为组件。

代码

<template>
  <div class="progress-container">
    <!-- 原生进度条，底部完整进度条部分 -->
    <input type="range" min="0" max="100" :value="currentProgress" :class="[rangeClass, 'silder']" />
    <!-- 自我实现样式，当前进度部分 -->
    <div :class="[progressClass,'progress-bar']"></div>
  </div>
</template>

<script>
export default {
  props: {
    // 一个页面用到多个此进度条组件的话要注意多个组件的类名要不同
    // 灰色的整个进度条的类名
    rangeClass: {
      type: String,
      default: "progress-range"
    },
    // 蓝色高亮的进度条的类名
    progressClass: {
      type: String,
      default: "progress-bar"
    },
    // 当前进度
    currentProgress: {
      type: Number,
    }
  },
  mounted () {
    const silder = document.querySelector("." + this.rangeClass);
    const progressBar = document.querySelector("." + this.progressClass);
    let that = this
    // 略微有点问题，偶发性会不触发绑定事件
    silder.oninput = function () {
      // 用来实时改变当前进度的宽度
      progressBar.style.width = this.value + "%";
      that.$emit('input', Number(this.value))
    };
  }
};
</script>

<style lang="less" scoped>
// less变量
@height: 4px;
@color: #3370ff;
@borderRadius: 2px;
.progress-container {
  width: 100%;
  position: relative;
  margin-top: -3px;
  .silder {
    // -webkit是为了浏览器兼容
    // 移除input的默认样式，下面这位博主有详细介绍
    // https://blog.csdn.net/weixin_68127493/article/details/138463570
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: @height;
    background: rgba(0, 0, 0, 0.12);
    // 外边框，下面这位博主有详细介绍
    // https://blog.csdn.net/XiugongHao/article/details/131898375
    outline: none;
    // 透明度
    opacity: 0.7;
    // 过渡效果，下面这位博主有详细介绍
    // https://blog.csdn.net/qq_32594913/article/details/135915376
    -webkit-transition: 0.2s;
    transition: opacity 0.2s;
    border-radius: @borderRadius;
    // 鼠标移入时，透明度变为1
    &:hover {
      opacity: 1;
    }
    // 当前进度右侧尽头的圆圈，详细介绍参考以下网址
    // https://cloud.tencent.com/developer/section/1072011
    &::-moz-range-thumb {
      width: 25px;
      height: 25px;
      background: @color;
      cursor: pointer;
    }
  }
  //   当前进度部分的样式
  .progress-bar {
    position: absolute;
    top: 12px;
    width: 50%;
    height: @height;
    background: @color;
    border-radius: @borderRadius;
  }
}
</style>

结语

样式部分为笔者需求的样式，需要根据自己项目需要调整。

！！有个问题是偶发性绑定事件不触发，暂时还没解决，欢迎大家帮忙解决。