<div class="login-select">
    <div v-show="errselectFlag" id="err-select"></div>
        <p id="title-p">按住滑塊，拖拽驗證</p>
        <div id="left-select"></div>
        <div id="right-select">
        <i id="icon-dui" class="iconfont icon-right"></i>
    </div>
</div>

//   滑塊驗證
var oRight = document.getElementById("right-select");
var bg = document.getElementById("left-select");
var title = document.getElementById("title-p");
var i = document.getElementById("icon-dui");
    oRight.onmousedown = function (e) {
      var downX = e.clientX; //按下按鈕后與窗口的x軸間距
      // 鼠標移動事件
      oRight.onmousemove = function (e) {
        if (e.clientX != 240) {
          oRight.style.left = 0 + "px";
          bg.style.left = 0 + "px";
        }
        var moveX = e.clientX - downX; //滑動的時候距離窗口的x軸的間距
        //只有在大于0的時候才拖動,否則會出現(xiàn)反向拖動
        if (moveX > 0) {
          oRight.style.left = moveX + "px"; //滑塊與左邊的距離
          bg.style.width = moveX + "px"; //背景的寬度就是滑塊距離左邊的位置
          if (moveX >= 280 - oRight.offsetWidth) {
            i.className = "iconfont icon-xingzhuang";
            i.style.color = "rgb(86, 192, 15)";
            title.innerText = "驗證通過";
            title.style.color = "#fff";
            oRight.onmousemove = null;
            oRight.onmousedown = null;
          }
        }
      };
    };

*{margin: 0;padding: 0;box-sizing: border-box;}
    .login-select {
      width: 280px;
      height: 40px;
      margin: auto;
      margin-top: 20px;
      margin-left: 15px;
      margin-right: 15px;
      text-align: center;
      line-height: 40px;
      background: rgba(134, 134, 131, 0.6);
      display: flex;
      position: relative;
      #err-select {
        width: 138px;
        height: 38px;
        position: absolute;
        right: -152px;
        top: 0;
        color: #fff;
        font-size: 12px;
        border-radius: 5px;
        line-height: 38px;
        text-align: center;
        background: rgb(177, 71, 71);
      }
      #title-p {
        text-align: center;
        line-height: 40px;
        width: 100%;
        height: 100%;
        font-size: 14px;
        position: absolute;
      }
      #left-select {
        width: 0;
        height: 100%;
        transform: translate(0.3s);
        background: rgb(86, 192, 15);
      }
      #right-select {
        width: 40px;
        height: 40px;
        background: #fff;
        color: #aaaa;
        text-align: center;
        line-height: 40px;
        border: 1px solid #ccc;
        position: absolute;
        cursor: move;
      }
    }