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>

结语

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/24722.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

二叉树的前序便利,中序遍历,后序遍历

前序遍历&#xff1a; 递归&#xff1a; class Solution { public:void preorder(TreeNode *root, vector<int> &res) {if (root nullptr) {return;}res.push_back(root->val);preorder(root->left, res);preorder(root->right, res);}vector<int> …

解决 make_ext4fs is not find, it is recommanded to install android-tools-fsutils

编译cluster linux时&#xff0c;遇到make_ext4fs命令无法找到。这个工具是被软件包 android-tools-futils 包含的。这个软件包只支持18.04的系统&#xff0c;在ubuntu20.04和ubuntu22.04上&#xff0c;无法被正确的安装。会报依赖问题&#xff0c;报错的信息是依赖python相关的…

Java中的IO流字节流(FileOutputStream与FileInputStream)+编码与解码

目录 ​编辑 IO流 File0utputstream FileOutputstream写数据的3种方式 void write(int b) 一次写一个字节数据 void write(byte[] b) 一次写一个字节数组数据 void write(byte[] b,int off,int len) 一次写一个字节数组的部分数据 FileOutputstream写数据的…

搞编程学习时是如何查找资料的?

刚开始学编程时&#xff0c;我通常用百度、360这样的搜索引擎去找资料。但后来我发现&#xff0c;根据想找的东西不同&#xff0c;用的搜索地方也得变。比如说&#xff0c;找编程学习的东西&#xff0c;我就不太用浏览器了&#xff0c;因为那儿广告太多&#xff0c;信息乱七八糟…

问题:军保卡不允许开立附属卡,不能开展境外交易,不开通云闪付工功能() #其他#经验分享

问题&#xff1a;军保卡不允许开立附属卡&#xff0c;不能开展境外交易&#xff0c;不开通云闪付工功能&#xff08;&#xff09; A&#xff0e;A&#xff1a;正确 B&#xff0e;B&#xff1a;错误 参考答案如图所示

C++STL初阶(3):string模拟实现的完善

1.流提取>>的优化&#xff08;利用缓存区的思想&#xff09; istream& operator>>(istream& is,string& str) {str.clear();char c;c is.get();while (c ! \0 && c ! \n) {str c;c is.get();}return is; } 在上文的对string的实践中&#…

blazehttp下载安装和自动化测试防护效果

blazehttp下载安装和自动化测试防护效果 说明测试环境的准备网站和waf配置blazehttp下载安装和测试测试效果waf安全日志查看 说明 需要docker环境和1panel面板 本测试使用blazehttp南墙waf进行测试&#xff0c;有兴趣的同学推荐使用雷池waf 测试环境的准备 使用1panel面板&am…

为什么会有虚像

本来我就打算写虚像相关的内容&#xff0c;实际上我看不懂光学的内容&#xff0c;我只是发觉书上没有使用变分法来做&#xff0c;而只是解析几何的变换&#xff0c;这个做法完全脱离实际&#xff0c;物理书为什么会这样写不知道原因&#xff0c;但是很明显这样的内容也非常的复…

docker基础,docker安装mysql,docker安装Nginx,docker安装mq,docker基础命令

核心功能操作镜像 Docker安装mysql docker run -d --name mysql -p 3306:3306 -e TZAsia/Shanghai -e MYSQL_ROOT_PASSWORDlcl15604007179 mysql docker的基本操作 docker rm 容器名称即可 docker ps 查看当前运行的容器 docker rm 干掉当前容器 docker logs 查看容器命令日…

瑞安面试分享

瑞安面试分享 面试时间&#xff1a;07/06/2024 方式&#xff1a;在线zoom&#xff0c;雇主会发面试链接&#xff0c;提前进入准备 瑞安招前端和后端开发&#xff0c;我面的是偏数据库设计的后端开发 问题1&#xff1a;自我介绍 寒暄后开始自我介绍&#xff0c;如果是后端就…

Golang:bytes 格式和解析数字字节值(10K、2M、3G等)

bytes 格式和解析数字字节值(10K、2M、3G等) 文档 https://github.com/labstack/gommon/tree/master/bytes 安装 go get github.com/labstack/gommon/bytes代码示例 格式化 bytes.Format(13231323) // 12.62MiB解析 b, _ : bytes.Parse("2M") // 2000000完整代…

代码随想录算法训练营Day32|122.买卖股票的最佳时机II、55.跳跃游戏、45.跳跃游戏II

买卖股票的最佳时机II 122. 买卖股票的最佳时机 II - 力扣&#xff08;LeetCode&#xff09; 这里我的贪心策略是&#xff0c;判断今天和前一天的股票差值&#xff0c;若差值大于0&#xff0c;则说明能获益&#xff0c;即卖出&#xff0c;每天都比较一次&#xff0c;将所有差…

为什么Vue的watch函数无法检测到父组件的参数变化?

在 Vue 中&#xff0c;watch 函数用于观察和响应 Vue 实例上的数据变动。然而&#xff0c;如果你在父组件中直接修改了数组或对象的内容&#xff08;例如&#xff0c;通过索引直接设置一个项的值&#xff0c;或者使用 Array.prototype.push 修改数组&#xff09;&#xff0c;Vu…

【ARM Cache 及 MMU 系列文章 6 -- Cache 寄存器 CTR_EL0 | CLIDR | CCSIDR | CSSELR 使用详解 1】

请阅读【ARM Cache 及 MMU/MPU 系列文章专栏导读】 及【嵌入式开发学习必备专栏】 文章目录 Cache 常用寄存器Cache CSSELR 寄存器Cache CSSELR 使用场景Cache CSSELR 操作示例 Cache CLIDR 寄存器LoUU 介绍LoUU 使用 LoUIS 介绍CLIDR 使用 Cache CCSIDR 寄存器Cache CTR_EL0 C…

移动端投屏到大屏幕的操作详解

如果你懒得折腾电脑、电视或其他大屏设备上的影视软件安装及配置&#xff0c;可以选择直接在手机端上将影片投屏到电脑、电视或其他大屏设备上&#xff0c;这里给大家分享三种手机投屏的方法。 系统自带的投屏功能 不管是安卓、鸿蒙还是苹果操作系统&#xff0c;都自带了无线…

【RabbitMQ】exchange\channel\queue的联系

Exchange、Channel和Queue在RabbitMQ中各自扮演不同的角色&#xff0c;它们之间的联系构成了RabbitMQ消息传递的核心机制。以下是对它们之间联系的详细解释&#xff1a; Exchange&#xff08;交换机&#xff09;&#xff1a; 交换机是RabbitMQ中的消息路由器&#xff0c;它接收…

8.3 Go 包的组织结构

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:「stormsha的主页」…

HTML静态网页成品作业(HTML+CSS)—— 家乡南宁介绍网页(2个页面)

&#x1f389;不定期分享源码&#xff0c;关注不丢失哦 文章目录 一、作品介绍二、作品演示三、代码目录四、网站代码HTML部分代码 五、源码获取 一、作品介绍 &#x1f3f7;️本套采用HTMLCSS&#xff0c;未使用Javacsript代码&#xff0c;共有2个页面。 二、作品演示 三、代…

使用`dbus-monitor`命令深入了解DBus通信

使用dbus-monitor命令深入了解DBus通信 DBus是一种消息总线系统&#xff0c;它允许应用程序在运行时进行通信。在Linux系统中&#xff0c;DBus是一个重要的组成部分&#xff0c;特别是在桌面环境中&#xff0c;如GNOME或KDE。dbus-monitor是一个命令行工具&#xff0c;用于监视…

【Python】解决Python报错:IndexError: list index out of range

​​​​ 文章目录 引言1. 错误详解2. 常见的出错场景2.1 循环中的索引错误2.2 错误的列表操作 3. 解决方案3.1 使用安全的访问方法3.2 循环时使用正确的范围 4. 预防措施4.1 编写单元测试4.2 动态检查列表长度 结语 引言 在Python中操作列表时&#xff0c;IndexError: list …