当前位置：首页 > news >正文

css系列：进度条

news 2025/7/24 2:15:17

前言

技术来源于需求，近期遇到了做语音的需求，有个调整语速和音量的进度条，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>