当前位置: 首页 > Web前端 > vue.js

vue可拖动水平进度条组件

时间:2023-03-31 15:50:06 vue.js

*{-webkit-user-select:none;-moz-用户选择:无;-ms-用户选择:无;user-select:none;}.progress-bar{text-align:left;.mask{宽度:320px;高度:20px;背景色:#dddddd;边界半径:10px;位置:绝对;}.bar{高度:20px;背景色:#1069db;位置:绝对;z-指数:2;边界半径:10px;底部:0;左:0;}.point{宽度:24px;高度:24px;边界半径:50%;边框:1px实心#1069db;位置:绝对;底部:-3px;左:0;z-指数:3;背景色:白色;}.num{文本对齐:居中;填充底部:20px;}}需要一个可以拖动,可以设置最大最小值和步长的进度条,所以请教了度娘,参考了很多网友写的进度条的代码,终于想出了这个进度条组件。可用的。代码:*{-webkit-user-select:none;-moz-用户选择:无;-ms-用户选择:无;user-select:none;}.progress-bar{text-align:left;.mask{宽度:320px;高度:20px;背景色:#dddddd;边界半径:10px;位置:绝对;}.bar{高度:20px;背景色:#1069db;位置:绝对;z-指数:2;边界半径:10px;底部:0;左:0;}.point{宽度:24px;高度:24px;边界半径:50%;边框:1px实心#1069db;位置:绝对;底部:-3px;左:0;z-指数:3;背景色:白色;}.num{文本对齐:居中;填充底部:20px;}}组件使用方法://例如: