这个博客介绍了一个使用Vue编写的可以拖动的时间区间控件。组件包括数据属性如`rangeMax`, `rangeMin`, `rangeTime`, 和 `rangeSpeed`，并在`mounted`钩子中调用`changeSpeed`方法来根据时间值计算速度百分比。样式类如`.ub`, `.ub-ac`, `.uabs-tr`等用于布局和定位，而`.range`和`.range-bar`定义了滑块的样式，`.range-thumb`则是滑动圆点的样式。"
113832291,469930,计算机体系结构中的MACs实现解析,"['计算机体系结构', '算法', '数字信号处理', '嵌入式硬件', 'GPU']
export default {
name: 'range',
data() {
return {
rangeMax: 8,
rangeMin: 0,
rangeTime: 4,
rangeSpeed: '50%',
}
},
mounted() {
this.changeSpeed();
},
methods: {
changeSpeed: function() {
var value = this.rangeTime;
var rangeMax = this.rangeMax;
var precent = (value / rangeMax) * 100;
this.rangeSpeed = precent + "%";
}
},
}
.ub {
display: -webkit-box !important;
display: box !important;
position: relative;
}
.ub-ac {
-webkit-box-align: center;
box-align: center;
}
.ub-pc {
-webkit-box-pack: center;
box-pack: center;
}
.ub-ver {
-webkit-box-orient: vertical;
box-orient: vertical;
}
.ub-f1 {
position: relative;
-webkit-box-flex: 1;
box-flex: 1;
}
.uabs-tr {
position: absolute;
right: 0;
top: 0;
z-index: 100;
}
.uabs-hide {
position: absolute !important;
left: 0;
right: 0;
top: 0;
bottom: 0;
opacity: 0;
z-index: 100;
}
.range {
height: 20px;
padding: 5px 0;
}
.range-bar {
border: 1px solid #108EE9;
border-radius: 7px;
height: 7px;
background: -webkit-linear-gradient(#108EE9, #108EE9) no-repeat, #fff;
background-size: 30% 100%;
}
.range-thumb {
position: absolute;
top: 0;
bottom: 0;
margin-bottom: 10px;
margin-left: -10px;
height: 20px;
width: 20px;
background: #fff;
border-radius: 50%;
border: solid 1px #ff9000;
}
扫一扫
605
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
