Vue如何拖动滑块
更新时间：2024年07月27日 09:55:22 作者：三次元挨踢汪
这篇文章主要介绍了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;
}
}
}总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue项目打包部署流程,本文通过实例图文相结合给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-09-09
网站中我们经常看到有个导航路径,可以直观地显示当前页面的路径,并快速返回之前的任意页面,这是一个非常实用的功能,也是在Web前端必备的导航UI之一,这篇文章主要给大家介绍了关于vue3自己封装面包屑功能组件的几种方式,需要的朋友可以参考下2021-09-09
本篇文章给大家分享了如何解决Vue中mounted钩子函数获取节点高度出错问题，对此有兴趣的朋友可以参考学习下。2018-05-05
在VueCLI项目中,vue.config.js用于自定义构建、开发和部署流程,本文详细解析了其常用配置项,包括基础路径、开发服务器、Webpack配置、CSS预处理、插件选项及环境变量管理等,并,通过代码示例帮助开发者高效管理项目配置,提升开发体验2026-05-05
这篇文章主要为大家详细介绍了vue+swiper实现时间轴效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
本文主要介绍了Vue绑定class和绑定内联样式的实现方法，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-11-11
Vue Loader 作为一个 webpack 的 Loader,扮演着将 .vue 文件转化为浏览器可执行代码的角色,下面就跟随小编一起深入了解Vue Loader 的技术细节与工作机制吧2024-12-12
这篇文章主要介绍了vue 如何根据选择的月份动态展示日期对应的星期几，帮助大家更好的利用vue框架处理日期需求，感兴趣的朋友可以了解下2021-02-02
这篇文章主要介绍了vue点击页面空白处实现保存功能,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-11-11
这篇文章主要介绍了vue中 $emit的用法，通过实例代码给大家介绍了子组件和父组件的相关知识，需要的朋友参考下吧2018-04-04
最新评论