Vueはドラッグプログレスバーを実装します

<テンプレート>
 <div>
  <div class="スライダー" ref="スライダー">
   <div class="process" :style="{ width }"></div>
   <div class="thunk" ref="trunk" :style="{left}">
    <div class="block"></div>
    <div class="tips">
     <!-- <span>{{スケール*100}}</span> -->
     <i class="fas fa-caret-down"></i>
    </div>
   </div>
  </div>
  <div>
   <ボタン
    @クリック="
     () => {
      this.per++;
     }
    「
   >
    +</ボタン
   >{{ あたり }}%<ボタン
    @クリック="
     () => {
      （this.per > 0）の場合{
       this.per--;
      }
     }
    「
   >
    -
   </ボタン>
  </div>
 </div>
</テンプレート>
<スクリプト>
/*
 * min プログレスバーの最小値* max プログレスバーの最大値* v-model は現在の値に対して双方向バインディングを実行し、ドラッグの進行状況をリアルタイムで表示します* */
エクスポートデフォルト{
 プロパティ: ["最小", "最大", "値"],
 データ（） {
  戻る {
   slider: null, //スクロールバーのDOM要素 thunk: null, //ドラッグDOM要素 per: this.value, //現在の値};
 },
 // ページにレンダリングする場合、mounted() {
  this.slider = this.$refs.slider;
  this.thunk = this.$refs.trunk;
  var _this = これ;
  this.thunk.onmousedown = 関数 (e) {
   var 幅 = parseInt(_this.width);
   var disX = e.clientX;
   document.onmousemove = 関数 (e) {
    // 値、左、幅
    // 値が変わると、計算プロパティを通じて左と幅が変更されます

    // ドラッグ時に新しい幅を取得します
    var newWidth = e.clientX - disX + 幅;
    // ドラッグ時の新しいパーセンテージを取得します。var scale = newWidth / _this.slider.offsetWidth;
    _this.per = Math.ceil((_this.max - _this.min) * スケール + _this.min);
    _this.per = Math.max(_this.per, _this.min);
    _this.per = Math.min(_this.per, _this.max);
    _this.$emit("入力", _this.per);
   };
   document.onmouseup = 関数（）{
    document.onmousemove = document.onmouseup = null;
   };
   false を返します。
  };
 },
 計算: {
  // スライダーの進行幅とトランクの左の値を計算するためのパーセンテージを設定します // 対応する式は、現在の値 - 最小値 / 最大値 - 最小値 = スライダーの進行幅 / スライダーの合計幅です
  // トランクの左 = スライダーの進行幅 + トランクの幅 / 2
  スケール() {
   (this.per - this.min) / (this.max - this.min) を返します。
  },
  幅（） {
   スライダーの場合
    this.slider.offsetWidth * this.scale + "px" を返します。
   } それ以外 {
    0 + "px" を返します。
   }
  },
  左（） {
   スライダーの場合
    戻る （
     this.slider.offsetWidth * this.scale -
     this.thunk.offsetWidth / 2 +
     「ピクセル」
    );
   } それ以外 {
    0 + "px" を返します。
   }
  },
 },
};
</スクリプト>
<スタイル>
。箱 {
 マージン: 100px 自動 0;
 幅: 80%;
}
.clear:after {
 コンテンツ： "";
 表示: ブロック;
 クリア: 両方;
}
.スライダー{
 ユーザー選択: なし;
 位置: 相対的;
 マージン: 20px 0;
 幅: 400ピクセル;
 高さ: 10px;
 背景: #e4e7ed;
 境界線の半径: 5px;
 カーソル: ポインタ;
}
.スライダー .プロセス {
 位置: 絶対;
 左: 0;
 上: 0;
 幅: 112ピクセル;
 高さ: 10px;
 境界線の半径: 5px;
 背景: #81b159;
}
.スライダー .サンク {
 位置: 絶対;
 左: 100px;
 上: -7px;
 幅: 20px;
 高さ: 20px;
}
.スライダー.ブロック{
 幅: 20px;
 高さ: 20px;
 境界線の半径: 50%;
 境界線: 2px 実線 #409eff;
 背景: rgba(255, 255, 255, 1);
 遷移: すべて 0.2 秒;
}
.スライダー .tips {
 位置: 絶対;
 左: -7px;
 下: 30px;
 最小幅: 15px;
 テキスト配置: 中央;
 パディング: 4px 8px;
 /* 背景: #000; */
 境界線の半径: 5px;
 高さ: 24px;
 色: #fff;
}
.スライダー .tips i {
 位置: 絶対;
 左マージン: -5px;
 左: 50%;
 下: -9px;
 フォントサイズ: 16px;
 色: #000;
}
.スライダー .block:hover {
 変換: スケール(1.1);
 不透明度: 0.6;
}
</スタイル>

<テンプレート>
 <スライダー:min="0" :max="100" v-model="per"></スライダー>
</テンプレート>

<スクリプト>
「@/components/slider」からスライダーをインポートします。
エクスポートデフォルト{
 データ（） {
  戻る {};
 },
 計算: {
  あたり:
   得る（） {
    0を返します。
   },
   設定(値) {
    コンソールログ(val);
   },
  },
 },
 コンポーネント: { スライダー },
 マウント() {},
 メソッド: {},
};
</スクリプト>

<スタイル>
</スタイル>