<template>
? <div id="app">
? ? <div class="slider">
? ? ? <div class="line"></div>
? ? ? <div class="line ac"></div>
? ? ? <div class="box" @touchstart="fnStart"></div>
? ? ? <div class="box as" @touchstart="fnStart"></div>
? ? </div>
? </div>
</template>

<script>
export default {
? methods: {
? ? fnStart(ev) {
? ? ? // 計算點擊位置在元素的坐標
? ? ? this.disX = ev.changedTouches[0].pageX - ev.target.offsetLeft;
? ? ? // 獲取父節(jié)點
? ? ? this.parent = ev.target.parentNode;
? ? ? // 獲取元素的寬
? ? ? this.ow = this.parent.getBoundingClientRect().width;
? ? ? // 計算除了元素的寬盒子還剩下多寬
? ? ? this.clienw = this.ow - ev.target.getBoundingClientRect().width;
?
? ? ? // 獲取左邊小圓球
? ? ? this.lcircle = this.parent.children[2];
? ? ? // 獲取右邊小圓球
? ? ? this.rcircle = this.parent.children[3];
?
? ? ? // 獲取變色條
? ? ? this.line = this.parent.children[1];
?
? ? ? document.ontouchmove = this.fnmove;
? ? ? document.ontouchend = this.fnend;
? ? },
? ? fnmove(ev) {
? ? ? // 計算移動的距離
? ? ? this.ll = ev.changedTouches[0].pageX - this.disX;
? ? ? // 判斷不能讓小圓球到盒子外面
? ? ? if (this.ll < 0) this.ll = 0;
? ? ? if (this.ll > this.clienw) this.ll = this.clienw;
? ? ? // 右邊線條
? ? ? if (ev.target.className.indexOf("as") != -1) {
? ? ? ? this.line.style.width =this.ll - this.parent.children[2].offsetLeft + "px";
? ? ? ? // 右邊推動左邊小圓球
? ? ? ? // 判斷如果右邊小球移動到左邊小于左邊小球offsetLeft的距離 如果當前為0 加一個小圓球的寬他們就不會重疊
? ? ? ? console.log(this.ll)
? ? ? ? if (this.ll < this.lcircle.offsetLeft + 30) {
? ? ? ? ? // 如果this.ll大于左邊小球的值 當前this.ll-30就是左邊小球left的值
? ? ? ? ? this.ind = this.ll - 30;
? ? ? ? ??
? ? ? ? ? console.log(this.ind)
? ? ? ? ? // 判斷當前左邊位置過等于0 就讓他左邊的位置等于0 就不會到盒子外面
? ? ? ? ? if (this.ind <= 0) {
? ? ? ? ? ? this.ind = 0;
? ? ? ? ? }
? ? ? ? ? // 如果this.ll的值小于小圓球的寬 兩個圓就會重疊 ?所以讓右邊圓的left值為30
? ? ? ? ? if (this.ll < 30) {
? ? ? ? ? ? this.ll = 30;
? ? ? ? ? }
?
? ? ? ? ? this.line.style.left = this.ind + "px";
? ? ? ? ? this.lcircle.style.left = this.ind + "px";
? ? ? ? }
? ? ? } else {
? ? ? ? // 左線條
? ? ? ? // 獲取左邊的距離
? ? ? ? this.line.style.left = this.ll + "px";
? ? ? ? // 當前this.ll就是line多出來的寬 ? 如果左邊不動 offsetleft的值是300 ? this.ll是移動的距離
? ? ? ? this.line.style.width =
? ? ? ? ? this.parent.children[3].offsetLeft - this.ll + "px";
? ? ? ? // 左邊推動右邊小圓球 ?要把右邊小球+30 不然兩個小球就會重合到一起
? ? ? ? if (this.ll + 30 > this.rcircle.offsetLeft) {
? ? ? ? ? this.indX = this.ll + 30;
?
? ? ? ? ? if (this.indX > this.clienw) {
? ? ? ? ? ? this.indX = this.clienw;
? ? ? ? ? }
?
? ? ? ? ? ? ? // 判斷當前移動的距離不能超過 this.clienw-30如果超過就會重疊
? ? ? ? ? if(this.ll>this.clienw-30){
? ? ? ? ? ? this.ll=this.clienw-30
? ? ? ? ? }
?
? ? ? ? ? this.line.style.left=this.indX+'px'
? ? ? ? ? this.rcircle.style.left=this.indX+'px'
? ? ? ? }
? ? ? }
?
? ? ? ev.target.style.left = this.ll + "px";
? ? },
? ? fnend() {
? ? ? document.ontouchmove = null;
? ? ? document.ontouchend = null;
? ? },
? },
};
</script>

<style scoped lang="less">
.slider {
? height: 30px;
? width: 300px;
? background: #999;
? position: relative;
? margin: auto;
? .box {
? ? width: 30px;
? ? height: 30px;
? ? border-radius: 50%;
? ? background: pink;
? ? position: absolute;
? }
? .box.as {
? ? background: blueviolet;
? ? right: 0;
? }
? // 線條
? .line {
? ? width: 300px;
? ? height: 5px;
? ? background: #eee;
? ? position: absolute;
? }
? .line.ac {
? ? background: rgb(247, 151, 25);
? }
}
</style>