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 つの方法 (ドメイン名に基づく)

推薦する

Centos7 で keepalived ログを別のパスに設定する方法の詳細な説明

Keepalived のインストール: cd <keepalived_sourcecode_p...

アップロード画像コントロールを実現するネイティブ js

この記事の例では、アップロード画像コントロールを実装するためのjsの具体的なコードを参考までに共有し...

現在のMySQL接続数を表示する方法の詳細な説明

1. 現在のすべての接続の詳細情報を表示します。 ./mysqladmin -uadmin -p -...

Webフロントエンド開発エンジニアが習得すべきコアスキル

Web フロントエンド開発に含まれる内容は、主に W3C 標準の構造、動作、パフォーマンスです。では...

nginx のインストールが完了した後に PHP を解析できない問題の解決方法

目次方法1方法2 nginxをインストールした後、PHPコードを解析できないことがわかりました。解決...

RHEL8 /CentOS8 でマルチノード Elastic Stack クラスターを構築する方法

一般的に ELK スタックとして知られる Elastic スタックは、Elasticsearch、L...

mysql 8.0.18 mgr のインストールと切り替え機能

1. システムインストールパッケージ yum -y インストール make gcc-c++ cmak...

Mac OS10.12 に mysql5.7.18 をインストールするチュートリアル

ウェブ全体を検索して、さまざまな落とし穴を見つけましたが、問題は解決しませんでした。ついに自分でも分...

Dockerは複数のポートマッピングコマンドを有効にします

次のように: docker run -d -p 5000:23 -p 5001:22 --name ...

Vue で CSS カスタム変数を使用する方法

目次CSS カスタム変数機能は古くから存在していますが、実際の開発ではあまり使用されていません。その...

Docker に Kong ゲートウェイをインストールする方法の例

1. Dockerネットワークを作成する docker ネットワーク作成 kong-net 2. デ...

MySQLは実際に分散ロックを実装できる

序文前回の記事では、eコマース シナリオでのフラッシュ セールの例を通じて、モノリシック アーキテク...

最初のReactページを作成する方法

目次Rractとは何ですか?背景React スキャフォールディングJSXとは何かRractとは何です...

画像ソーシャルネットワーキングサイトのUIアプリケーションの比較分析(図)

私たちの生活、仕事、勉強において、ソーシャル ネットワークは徐々に将来のインターネット発展のトレンド...

MySQL サービスを起動できない問題の解決策を含む MySQL 5.7.17 インストール チュートリアル

.net 開発に関しては、Microsoft の SQL Server データベースに精通しており、...