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="" />
<!-- 自我实现样式，当前进度部分 -->
<div :class=""></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> 结语
样式部分为笔者需求的样式，需要根据自己项目需要调解。
！！有个标题是偶发性绑定事件不触发，暂时还没解决，欢迎各人帮忙解决。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]