この記事では、ドラッグプログレスバーを実現するための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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: deepin 2014 システムに MySQL データベースをインストールする方法
>>: Nginx 仮想ホストを構成する 3 つの方法 (ドメイン名に基づく)
Keepalived のインストール: cd <keepalived_sourcecode_p...
この記事の例では、アップロード画像コントロールを実装するためのjsの具体的なコードを参考までに共有し...
1. 現在のすべての接続の詳細情報を表示します。 ./mysqladmin -uadmin -p -...
Web フロントエンド開発に含まれる内容は、主に W3C 標準の構造、動作、パフォーマンスです。では...
目次方法1方法2 nginxをインストールした後、PHPコードを解析できないことがわかりました。解決...
一般的に ELK スタックとして知られる Elastic スタックは、Elasticsearch、L...
1. システムインストールパッケージ yum -y インストール make gcc-c++ cmak...
ウェブ全体を検索して、さまざまな落とし穴を見つけましたが、問題は解決しませんでした。ついに自分でも分...
次のように: docker run -d -p 5000:23 -p 5001:22 --name ...
目次CSS カスタム変数機能は古くから存在していますが、実際の開発ではあまり使用されていません。その...
1. Dockerネットワークを作成する docker ネットワーク作成 kong-net 2. デ...
序文前回の記事では、eコマース シナリオでのフラッシュ セールの例を通じて、モノリシック アーキテク...
目次Rractとは何ですか?背景React スキャフォールディングJSXとは何かRractとは何です...
私たちの生活、仕事、勉強において、ソーシャル ネットワークは徐々に将来のインターネット発展のトレンド...
.net 開発に関しては、Microsoft の SQL Server データベースに精通しており、...