Vueはシンプルなスライダー検証を実装する

<テンプレート>
  <div class="ドラッグ"
       ref="ドラッグDiv">
    <div class="drag_bg"></div>
    <div class="drag_text">{{confirmWords}}</div>
    <div ref="moveDiv"
         @mousedown="mousedownFn($event)"
         :class="{'handler_ok_bg':成功を確認}"
         クラス="ハンドラー handler_bg"
         スタイル="位置: 絶対;上: 0px;左: 0px;"></div>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  データ （） {
    戻る {
      beginClientX: 0, /* 画面の左端からの距離*/
      mouseMoveStata: false, /* ドラッグステータスの判定をトリガー*/
      maxwidth: '', /* スライダーの幅に基づいて計算された最大ドラッグ幅*/
      confirmWords: 'スライダーをドラッグして確認します', /* スライダーテキスト*/
      confirmSuccess: false /* 検証成功判定*/
    }
  },
  メソッド: {
    mousedownFn: 関数 (e) {
      成功の確認の場合
        e.preventDefault && e.preventDefault() // テキスト選択などのブラウザのデフォルトイベントを防止 this.mouseMoveStata = true
        this.beginClientX = e.clientX
      }
    }, // マウス終了イベント successFunction () {
      this.confirmSuccess = true
      this.confirmWords = '検証に合格しました'
      ウィンドウにイベントリスナーを追加する場合
        document.getElementsByTagName('html')[0].removeEventListener('mousemove', this.mouseMoveFn)
        document.getElementsByTagName('html')[0].removeEventListener('mouseup', this.moseUpFn)
      } それ以外 {
        document.getElementsByTagName('html')[0].removeEventListener('mouseup', () => { })
      }
      document.getElementsByClassName('drag_text')[0].style.color = '#fff'
      document.getElementsByClassName('handler')[0].style.left = this.maxwidth + 'px'
      document.getElementsByClassName('drag_bg')[0].style.width = this.maxwidth + 'px'
    }, // 成功を確認する function mouseMoveFn (e) {
      if (this.mouseMoveStata) {
        幅 = e.clientX - this.beginClientX とします。
        幅 > 0 && 幅 <= this.maxwidth の場合 {
          document.getElementsByClassName('handler')[0].style.left = 幅 + 'px'
          document.getElementsByClassName('drag_bg')[0].style.width = 幅 + 'px'
        } そうでない場合 (幅 > this.maxwidth) {
          this.successFunction()
        }
      }
    }, // マウス移動イベント moseUpFn (e) {
      this.mouseMoveStata = false
      var 幅 = e.clientX - this.beginClientX
      幅が this.maxwidth より小さい場合
        document.getElementsByClassName('handler')[0].style.left = 0 + 'px'
        document.getElementsByClassName('drag_bg')[0].style.width = 0 + 'px'
      }
    } // マウスアップイベント},
  マウントされた（）{
    this.maxwidth = this.$refs.dragDiv.clientWidth - this.$refs.moveDiv.clientWidth
    document.getElementsByTagName('html')[0].addEventListener('mousemove', this.mouseMoveFn)
    document.getElementsByTagName('html')[0].addEventListener('mouseup', this.moseUpFn)
  }
}
</スクリプト>

<スタイルスコープ>
.ドラッグ{
  位置: 相対的;
  背景色: #e8e8e8;
  幅: 30%;
  高さ: 34px;
  行の高さ: 34px;
  テキスト配置: 中央;
}
.ハンドラ{
  幅: 40px;
  高さ: 32px;
  境界線: 1px 実線 #ccc;
  カーソル: 移動;
}
.ハンドラ_bg {
  背景: #fff
    url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8++IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+YiRG4AAAALFJREFUeNpi/P//PwMlgImBQkA9A+bOnfsIiBOxKcInh+yCaCDuByoswaIOpxwjciACFegBqZ1AvBSIS5OTk/8TkmNEjwWgQiUgtQuIjwAxUF3yX3xyGIEIFLwHpKyAWB+I1xGSwxULIGf9A7mQkBwTlhBXAFLHgPgqEAcTkmNCU6AL9d8WII4HOvk3ITkWJAXWUMlOoGQHmsE45ViQ2KuBuASoYC4Wf+OUYxz6mQkgwAAN9mIrUReCXgAAAABJRU5ErkJggg==')
    繰り返しのないセンター。
}
.handler_ok_bg {
  背景: #fff
    url（ 'data：image/png; base64、ivborw0kggoaaaanasuaabaaaaaqcayaaaaf8/9haaaagxrfwhrtb2z0d2fyzqbbzg9izsbjbjbwfnzvjlywr5hmnzvmnzvnvzのbasezg9izsbjbjbwfnzvjlvza aaaaadw/ehbhy2tldcbizwdpbj0i77u/iibpzd0ivzvnme1wq2voauh6cmvtek5uy3pryzlkij8 ++ idwvcmrmokrllc2nyaxb0aw9upia8lhjkzjpsrey+idwvevey+idwvevey+idwvevey+idwvevey+idwvevey+idwvcmrmokrllc2nyaxb0wia9upia ZXQGZW5KPSJYIJ8+K+SHWWAAASZJREFUENPI/P // PWMYKD8UZW+KUODYEYGLOMIVGHGG/EM/PTHX0EFK9I8WAOEZ+IDUPIIMY8IN1QJWENOGJ3ACO5GNABMAXAXA4GIGNJ0MI4GYNJ0MI4GIGNJ0IGNJ0MI4GYNJ0MI4GY4GIGNJ0MI4GY4GY4GY4GY4GY4GY4GY4GY4GY4GY4GY4GY4GY4 +amamj78aedtbiwgyg5gbifcsxfczoabmcy4a4gojnh0d6d6dpk4ixnsvihafsdoaelrajrjgjp/awpbhmhejiqnwyrmuznq4vqgdqqxk0ia/0i17wjipmqmqipmqmqをbekgxsajiieusbnnsbdweay9mefgmmgbk00e0izta7ahectdq58mrua6wllggfmmompig1qfegwaixgzo8giysmwqgsazgwhaezhicizoabkjkqymiaabjaabjaaabjaabgjaabgjaabgjaabgjaabgjaabgggggsgsgwhaezhicizoabkjkqymia
    繰り返しのないセンター。
}
.drag_bg {
  背景色: #7ac23c;
  高さ: 34px;
  幅: 0px;
}
.ドラッグテキスト{
  位置: 絶対;
  上: 0px;
  幅: 100%;
  テキスト配置: 中央;
  -moz-user-select: なし;
  -webkit-user-select: なし;
  ユーザー選択: なし;
  -o-ユーザー選択: なし;
  -ms-user-select: なし;
}
</スタイル>