基于el-slider实现一个能拖动的时间范围选择器
作者：毛三仙
这篇文章主要介绍了基于el-slider实现一个能拖动的时间范围选择器,并通过实例代码介绍了基于element-ui el-slider实现滑动限位器的方法,需要的朋友可以参考下
el-slider实现一个能拖动的时间范围选择器
<template>
<div style="width: 200px">
<el-slider
v-model="workTime"
:step="5"
:max="1435"
:marks="marks"
:format-tooltip="formatTime"
@input="getTime"
>
</el-slider>
</div>
</template>
<script>
export default {
name: 'aaa',
components: {},
props: {},
computed: {},
watch: {},
filters: {},
data() {
return {
workTime: 0,
marks: {
0: '00:00',
720: {
style: {
color: '#1989FA'
},
label: '12:00'
},
1435: {
label: this.$createElement('strong', '23:55')
}
},
}
},
methods: {
/**
* @Event 分钟转成时间(如：06:05)
* params: val(分钟)
* @author: mhf
* @time: 2024-01-31 14:17:54
**/
formatTime(val) {
const hour = Math.floor(val / 60).toString().padStart(2, '0');
const min = (val % 60).toString().padStart(2, '0');
console.log(`${hour}:${min}`)
return `${hour}:${min}`;
},
getTime(e) {
this.formatTime(e)
}
},
created() {
},
mounted() {
},
destroyed() {
}
}
</script>
<style lang="scss" scoped></style>补充：
基于element-ui el-slider实现滑动限位器
应需求需要，要做一个滑动限位器，一通百度，一通谷歌，没有相对应的解决方案，所以只能自己上。过程有丢丢曲折，比较细的东西。所以耗时也长写。写出来有需要的可以参考
需求图如下：
上面的滑块是可以在区间【50-100】之间随意切换的。左边和右边也是可以随意拉动，区间可以随意变动，上面的滑块也可以跟着区间的范围不停的在变动。当然，也是有限制的，我这边的限制是30-150。
需求拿到手，那就是开始开工了。
看了看element-ui没有现成的，只能自己用css组合啦。
废话就少说了，上代码
html模块
<div class="fov">
<div class="all_slider">
<div class="assist_mian">
<div class="rel_slider" :style="{'left':moveWidata.left+'%','right':moveWidata.right+'%'}">
<el-slider
v-model="currentFov"
class="point"
:min="fovWid[0]"
:max="fovWid[1]"
@input="setNoFovUnityData()"
@change="getFovAngle()"
/>
</div>
</div>
<el-slider
v-model="fovValue"
class="slider_line"
range
:marks="marks"
:min="30"
:max="150"
@change="getFovData()"
/>
</div>
<div class="show_slider">
<div class="each_inp spe_left">
<el-input
v-model="fovMin"
:min="Number(30)"
:max="Number(150)"
onkeyup="value=value.replace(/[^\d]/g,'')"
type="text"
class="input"
@change="getFovMin()"
/>
<div class="text">最近</div>
</div>
<div class="each_inp spe_right">
<div class="p_right">
<el-input
v-model="fovMax"
:min="Number(30)"
:max="Number(150)"
onkeyup="value=value.replace(/[^\d]/g,'')"
type="text"
class="input"
@change="getFovMax()"
/>
<div class="text">最远</div>
</div>
</div>
</div>
</div>css模块代码如下：
<style lang="scss" scoped>
.assist_mian {
width: 100%;
padding: 0 20px;
position: relative;
height: 1px;
}
.set_title {
padding-top: 20px;
color: #333333;
}
.fov {
padding: 8px 20px 0;
position: relative;
overflow: hidden;
}
.spe_title {
display: flex;
}
.set_sum {
flex: 1;
padding-top: 20px;
text-align: right;
color: #999;
font-size: 12px;
}
.number {
color: #333333;
}
.show_slider {
display: flex;
justify-content: space-between;
margin-top: 20px;
}
.each_inp {
flex: 1;
}
.spe_left {
margin-left: -20px;
}
.spe_right {
position: relative;
margin-right: -20px;
}
.input {
display: block;
width: 50px;
height: 30px;
margin-top: 8px;
background: #F4F4F4;
border-radius: 3px 3px 3px 3px;
border: 1px solid #E9E9E9;
text-align: center;
color: #333;
font-size: 12px;
}
.text {
width: 50px;
height: 30px;
line-height: 30px;
font-size: 12px;
color: #666666;
text-align: center;
}
.p_right {
position: absolute;
right: 0;
}
.rel_slider {
position: absolute;
left: 0;
right: 0;
top: -10px;
}
.input {
::v-deep .el-input__inner {
font-size: 14px !important;
color: #000000 !important;
padding: 0;
height: 30px;
border: none;
text-align: center;
}
}
</style>
<style lang="scss">
.point {
.el-slider__button {
background: url(../../../assets/cam/icon.png) no-repeat;
border: none;
}
.el-slider__runway {
margin: 0;
background: transparent;
}
.el-slider__bar {
background: transparent;
}
}
.slider_line {
.el-slider__runway {
margin: 10px 0 16px 0;
}
.el-slider__bar {
background-color: #001B84;
}
.el-slider__button {
border: 2px solid #001B84;
}
.el-slider__stop {
background: transparent;
}
}
.all_slider {
position: relative;
// padding: 0 20px;
top: 8px;
.el-slider__marks-text {
color: #000;
}
}
</style>样式搞定，就到了js啦。毕竟要动态变化呀。代码如下：
<script>
export default {
data() {
return {
currentFov: 55, // 得到当前值
fovValue: [50, 100],
eachWid: (120 / 100), // 得到滑条每个位置的长度，广角
moveWidata: { left: 0, right: 0 }, // 广角垂直视角选择
fovWid: [60, 80], // 得到广角滑块得区域
marks: { // 得到fov限制
'30': '30',
'90': '90',
'150': '150'
},
fovMin: 0, // fov的最小值,input框的
fovMax: 0,
}
},
created() {
this.getFovData() //初始化一下长度
},
methods: {
// 得到fov的最小值
getFovMin(e) {
this.getFovRange(1, 30, 150)
},
// 得到fov的最大值
getFovMax() {
this.getFovRange(2, 30, 150)
},
/**
* 得到视角fov的数据
* type是最近还是最远
*min 最小值
*max 最大值
*/
getFovRange(type, min, max) {
if (type === 1) {
if (+this.fovMin < min) { // 最小值输入小于最小应输入的则赋值最新值
this.fovMin = min
this.fovValue = [min, this.fovValue[1]]
} else {
this.fovValue = [+this.fovMin, this.fovValue[1]]
}
} else {
if (this.fovMax > max) {
this.fovMax = max
this.fovValue = [this.fovValue[0], max]
} else {
this.fovValue = [this.fovValue[0], +this.fovMax]
}
}
this.getFovData(true)
},
/**
* 计算上面当前滑块的长度
* fov视角得初始化设置
*/
getFovData(isUnityData = false) {
if (this.fovMin !== this.fovValue[0]) {
this.fovMin = this.fovValue[0]
const wleft = (this.fovValue[0] - 30) / this.eachWid
this.moveWidata.left = wleft
}
if (this.fovMax !== this.fovValue[1]) {
this.fovMax = this.fovValue[1]
const wright = (150 - this.fovValue[1]) / this.eachWid
this.moveWidata.right = wright
}
this.fovWid = this.fovValue
}
}
}
</script>以上就是相关代码啦。
图标记得改，.point .el-slider__button的backgroud，
需要的自己复制粘贴吧。可以参考也可以自己封装，因为我的业务原因。不能封装，分开是更好的选择，所以就没有封装，实在需要就自己封装。本小秃头就不操这心了。下一篇见。啦啦啦。
到此这篇关于el-slider实现一个能拖动的时间范围选择器的文章就介绍到这了,更多相关el-slider时间范围选择器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！