应需求需要，要做一个滑动限位器，一通百度，一通谷歌，没有相对应的解决方案，所以只能自己上。过程有丢丢曲折，比较细的东西。所以耗时也长写。写出来有需要的可以参考
需求图如下：
上面的滑块是可以在区间【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，文章来源：https://www.toymoban.com/news/detail-605897.html
需要的自己复制粘贴吧。可以参考也可以自己封装，因为我的业务原因。不能封装，分开是更好的选择，所以就没有封装，实在需要就自己封装。本小秃头就不操这心了。下一篇见。啦啦啦。文章来源地址https://www.toymoban.com/news/detail-605897.html
到了这里，关于基于element-ui el-slider实现滑动限位器的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
