Vue如何拖動滑塊

更新時間：2024年07月27日 09:55:22 作者：三次元挨踢汪

這篇文章主要介紹了Vue如何拖動滑塊問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

Vue拖動滑塊

拖動進(jìn)度條

div頁面數(shù)據(jù)樣式
 <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數(shù)據(jù)

  Avalue: 0,
      Bvalue: 0,
      Cvalue: 0,
      positionX_A: 0,
      positionX_B: 0,
      positionX_C: 0,
  //接口返回的數(shù)據(jù)
       mormal_level: null,
        minor_level: null,
        major_level: null,

監(jiān)聽事件的發(fā)生改變時改變對應(yīng)的數(shù)值

  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);
    },
  },

查詢時重新給賦值到滑塊上

//該方法主要用于后端返回數(shù)據(jù)分別賦給的Avalue，Bvalue,Cvalue,之后重新計算樣式寬度
 //可以不用調(diào)
 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; //獲取目標(biāo)元素
      console.log(e,'測試數(shù)據(jù)')
      //算出鼠標(biāo)相對元素的位置
      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; //獲取目標(biāo)元素
      //算出鼠標(biāo)相對元素的位置
      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; //獲取目標(biāo)元素
      //算出鼠標(biāo)相對元素的位置
      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對應(yīng)的樣式

.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;
    }
  }
}