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

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

この記事では、ドラッグプログレスバーを実現するための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);
   },
  },
 },
 コンポーネント: { スライダー },
 マウント() {},
 メソッド: {},
};
</スクリプト>

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

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vue で円形プログレスバーを実装する例
  • vue.js+ElementUI はパスワードの強度を促すプログレスバーの効果を実現します
  • Vue ページの読み込み時の進捗バー機能 (サンプル コード)
  • 循環読み込みプログレスバーのカプセル化 (Vue プラグイン バージョンとネイティブ js バージョン)
  • Vueはnprogressを設定してページ上部にプログレスバーを実装します。
  • Vue で NProgress プログレスバーを使用する方法
  • Vue プロジェクトはファイルダウンロードの進行状況バー機能を実装します

<<:  deepin 2014 システムに MySQL データベースをインストールする方法

>>:  Nginx 仮想ホストを構成する 3 つの方法 (ドメイン名に基づく)

推薦する

Linux での MySql centos7 のバイナリコンパイルとインストールに関するチュートリアル

// これをインストールするのに丸一日かかったので、記録するためにメモを書きました。 //何か問題が...

Reactプロジェクトの新規作成からデプロイまでの実装例

新しいプロジェクトを始めるこの記事では主に、新規プロジェクトを0から1まで取り組むプロセスを記録し、...

JavaScript Canvas で三目並べゲームを実装

この記事では、JavaScript Canvasで三目並べゲームを実装するための具体的なコードを参考...

MySQLで一意のサーバーIDを生成する方法

序文MySQL では、server-id を使用してデータベース インスタンスを一意に識別し、それを...

ウェブページ内の 2 つのボックス モデル (W3C ボックス モデル、IE ボックス モデル)

Web ページ ボックス モデルには 2 種類あります。 1: 標準 W3C ボックス モデル。2:...

Ubuntu 18.04 のログインループ/ブートインターフェイスで停止/グラフィカルインターフェイスに入ることができない問題を解決する方法

原因: NVIDIA グラフィック カード ドライバーが破損している解決:コマンドラインモードで再起...

MySQL 権限制御の詳細な説明

目次mysql 権限制御権限システムテーブル変更後にMySQLの権限を有効にする方法権限の付与と取り...

Docker-compose インストール yml ファイルの設定方法

目次1. オフラインインストール2. オンラインインストール3. アンインストール4. ymlファイ...

カスタムポップアップボックスを実装するためのJavaScriptシングルトンモード

この記事では、カスタムポップアップボックスを実装するためのJavaScriptシングルトンモードの具...

MySQL マルチバージョン同時実行制御 MVCC の実装

トランザクション分離レベルの設定 グローバルトランザクション分離レベルを読み取りコミット済みに設定;...

Dockerはコード検出プラットフォームSonarQubeを構築し、Mavenプロジェクトのプロセスを検出します

1 はじめに優れたコーディング習慣は優れたプログラマーが備えるべき資質ですが、コードの品質を保証する...

Vue でのルーティングガードの具体的な使用法

目次1. グローバルガード1.1 グローバルフロントガード1.2 グローバルポストルートガード1.3...

シンプルなタブバー切り替えケースを実現するJavaScript

この記事では、タブバーの切り替え効果を簡単に実現するためのJavaScriptの具体的なコードを参考...

MySQL 8.0.22 winx64 のインストールと設定方法のグラフィックチュートリアル

MySQL-8.0.22-winx64のデータベースインストールチュートリアルは参考になります。具体...