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>
@height: 4px;
@color: #3370ff;
@borderRadius: 2px;
.progress-container {
  width: 100%;
  position: relative;
  margin-top: -3px;
  .silder {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: @height;
    background: rgba(0, 0, 0, 0.12);
    outline: none;
    opacity: 0.7;
    -webkit-transition: 0.2s;
    transition: opacity 0.2s;
    border-radius: @borderRadius;
    &:hover {
      opacity: 1;
    }
    &::-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>

结语

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

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