Vue如何拖动滑块
作者：三次元挨踢汪
这篇文章主要介绍了Vue如何拖动滑块问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
Vue拖动滑块
拖动进度条
- Vue
div页面数据样式
<div class="bg">
<p class="txt0">0</p>
<i class="A" :style="{ width: Avalue + '%' }">
<p class="Aptxt">A：{{ Avalue }}</p>
</i>
<i class="B" :style="{ width: Bvalue + '%' }">
<p class="Bptxt">B：{{ Bvalue }}</p>
</i>
<i class="C" :style="{ width: Cvalue + '%' }">
<p class="Cptxt">C：{{ Cvalue }}</p>
</i>
<p class="txt100">100</p>
<span
class="btnA"
:style="{ left: positionX_A + 'px' }"
@mousedown="moveA"
></span>
<span
class="btnB"
:style="{ left: positionX_B + 'px' }"
@mousedown="moveB"></span>
<span
class="btnC"
:style="{ left: positionX_C + 'px' }"
@mousedown="moveC"
></span>
</div>
- data数据
Avalue: 0,
Bvalue: 0,
Cvalue: 0,
positionX_A: 0,
positionX_B: 0,
positionX_C: 0,
//接口返回的数据
mormal_level: null,
minor_level: null,
major_level: null,监听事件的发生改变时改变对应的数值
watch: {
templateIndex(val) {
this.index = val ? val : 0;
},
positionX_A(val) {
this.Avalue = Math.ceil(((val + 10) / 435) * 100);
},
positionX_B(val) {
this.Bvalue = Math.ceil(((val + 10) / 435) * 100);
},
positionX_C(val) {
this.Cvalue = Math.ceil(((val + 10) / 435) * 100);
},
},查询时重新给赋值到滑块上
//该方法主要用于后端返回数据分别赋给的Avalue，Bvalue,Cvalue,之后重新计算样式宽度
//可以不用调
setPosition() {
this.positionX_A = parseInt((this.Avalue / 100) * 435 - 10);
this.positionX_B = parseInt((this.Bvalue / 100) * 435 - 10);
this.positionX_C = parseInt((this.Cvalue / 100) * 435 - 10);
},//移动滑块时的方法
moveA(e) {
let odiv = e.target; //获取目标元素
console.log(e,'测试数据')
//算出鼠标相对元素的位置
let disX = e.clientX - odiv.offsetLeft;
document.onmousemove = (e) => {
let left = e.clientX - disX;
if (left <= this.positionX_B && left >= -10 && left <= 425) {
this.positionX_A = left;
odiv.style.left = left + "px";
}
};
document.onmouseup = (e) => {
document.onmousemove = null;
document.onmouseup = null;
};
},
moveB(e) {
let odiv = e.target; //获取目标元素
//算出鼠标相对元素的位置
let disX = e.clientX - odiv.offsetLeft;
document.onmousemove = (e) => {
let left = e.clientX - disX;
if (
left >= this.positionX_A &&
left <= this.positionX_C &&
left >= -10 &&
left <= 425
) {
this.positionX_B = left;
odiv.style.left = left + "px";
}
};
document.onmouseup = (e) => {
document.onmousemove = null;
document.onmouseup = null;
};
},
moveC(e) {
let odiv = e.target; //获取目标元素
//算出鼠标相对元素的位置
let disX = e.clientX - odiv.offsetLeft;
document.onmousemove = (e) => {
let left = e.clientX - disX;
if (left >= this.positionX_B && left >= -10 && left <= 425) {
this.positionX_C = left;
odiv.style.left = left + "px";
}
};
document.onmouseup = (e) => {
document.onmousemove = null;
document.onmouseup = null;
};
},Css对应的样式
.bg {
position: relative;
display: flex;
width: 435px;
height: 10px;
margin-top: 10px;
background-color: #53bf6d;
.txt0 {
position: absolute;
left: 0;
top: 15px;
}
.txt100 {
position: absolute;
top: 15px;
right: 0;
}
i {
position: absolute;
display: inline-block;
height: 10px;
}
.A {
background: #ff5757;
z-index: 3;
.Aptxt {
position: absolute;
top: 15px;
right: -5px;
}
}
.btnA {
position: absolute;
top: -5px;
width: 20px;
height: 20px;
background: #fff;
border-radius: 50%;
border: solid 2px #0065bc;
z-index: 3;
cursor: ew-resize;
}
.btnB {
content: "";
position: absolute;
top: -5px;
width: 20px;
height: 20px;
background: #fff;
border-radius: 50%;
border: solid 2px #0065bc;
z-index: 4;
cursor: ew-resize;
}
.btnC {
content: "";
position: absolute;
top: -5px;
width: 20px;
height: 20px;
background: #fff;
border-radius: 50%;
border: solid 2px #0065bc;
z-index: 4;
cursor: ew-resize;
}
.B {
background: #ffec58;
z-index: 2 !important;
.Bptxt {
position: absolute;
top: 15px;
right: -5px;
}
}
.C {
background: #ffba00;
z-index: 1 !important;
.Cptxt {
position: absolute;
top: 15px;
right: -5px;
}
}
}总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。