モバイル端末での Vue2.x Picker のグローバル呼び出し実装

モバイル端末での Vue2.x Picker のグローバル呼び出し実装

ピッカーコンポーネントとは

PC 側の選択タグと比較すると、モバイル側の選択ボックスは通常、viewPort の下部にポップアップ表示されます。

ピッカーコンポーネントの問題

  • Picker は通常、固定レイアウトを使用します。ただし、Picker コンポーネントを作成するときに、コンポーネントがビューポートの下部にポップアップできず、コンポーネント内にポップアップし、スタイルが混乱し、C エンドの美観に適合しないという問題に遭遇しました。上記の問題の原因は、[スタック コンテキスト] にあります。固定レイアウトは、ビューポートをベースとしてではなく、現在のスタック コンテキストに基づいています。
  • Picker をルートコンポーネントの下に置くと、データフローが混乱します。ネストが深すぎるコンポーネントは、Picker の表示と非表示を簡単にトリガーできません。状態管理 vuex との組み合わせや $listeners の透過的な伝達を介して処理する必要があり、開発者の精神的負担がある程度増加します。

解決

宣言型プログラミングを使用してピッカーをボディに配置すると、上記の2つの問題をより適切に回避できます。たとえば、次のメソッドを使用してピッカーの表示と非表示を呼び出すことができます。

 this.$picker(コンポーネントオプション、{
 ラッパー: {
  プロパティ: {},
  の上: {}
 },
 プロパティ: {},
 の上: {}
 })

オプションの説明

  • ラッパー: ピッカー関数プログラミングパラメータ
  • props: コンポーネントオプションのオプション設定
  • on: コンポーネントオプションの時間バインディング

解決

ディレクトリ部門

- コンポーネント
-ベース使用コンポーネント
- ピッカー
- ピッカー
- インデックス
- メイン.js

Pickerコンテナの説明

Picker.vue ファイル関数:

  • ピッカーコンテナを描画する
  • 組み込みのトランジションコンポーネントとCSS3アニメーションを組み合わせてアニメーショントランジションを作成します。

コードは次のとおりです。

 <トランジション名="スライドアップ">
 <div class="picker" v-if="表示">
  <スロット></スロット>
  <div class="mask"></div>
 </div>
 </トランジション>

ピッカーの作成

アイデアの概要

  • 次の操作を実行する Picker 関数を定義します。
    • PickerPickerInstanceのインスタンスを生成する
    • PickerInstance.show を true に設定する
    • ピッカーコンテナを本体の下部に配置する
  • ピッカーコンポーネントの生成には手ぶれ防止対策が必要であり、連続クリックでは実行できない
  • 渡されたコンポーネントオプションのpropsと属性に基づいてvnodeを生成し、それをデフォルトスロットに配置します。
  • マスク要素をクリックすると Picker が非表示になるため、hide メソッドを定義する必要があります。
  • 非表示メソッドは次の問題を解決する必要がある
    • インスタンスの下のshow属性をfalseに設定する
    • 本体の下のピッカーコンテナを削除します
    • インスタンスをNullに設定し、GCを呼び出す

ピッカー機能

  • ピッカーインスタンスを生成するためにcreate関数を呼び出す
  • インスタンスが存在するかどうかを判断する
  • 現在のコンポーネントオプションと構成を保持する
  • Pickerコンポーネントのshowプロパティを変更してポップアップウィンドウをポップアップし、それをbodyの下に挿入します。

作成する

  • Pickerのコンテナとしてelを作成し、それをbodyの下に挿入します。
  • レンダリング関数では、Picker は以前に渡されたコンポーネント オプションを内部のデフォルト スロットとして配置し、現在のインスタンスの子コンポーネントとしてルート要素として機能します。
  • 後で非表示機能のトリガーとして、マウントされた機能内の対応する遷移時間を取得します。

アニメーション時間をマウント時に直接取得するのではなく、requestAnimationFrame で取得する必要があるのはなぜですか?

コンポーネントのマウントされた関数は、最初のレンダリング後に呼び出され、Toast コンポーネントは showStatus を設定することで遷移の enter 関数をトリガーします (Toast コンポーネントのマウントされた関数は事前に呼び出されますが、この時点ではトースト dom 上に遷移クラスはありません)。このとき、data.setter 関数がトリガーされ、Watcher を分散して更新し、すべての操作が nextTick (つまり microtask) で実行されるため、呼び出し順序は次のようになります。

Toast コンポーネントがマウントされました -> 親コンポーネントがマウントされました (つまり、現在実行中の Mounted 関数です。toast の transition には appear 属性がないため、transition enter 関数はトリガーされず、transition クラスは追加されないことに注意してください) -> nextTick() -> Toast コンポーネントが update(v-show) -> transition(v-show が enter 関数をトリガーします) -> toast dom が transition クラス名を追加します -> window.getComputedStyle(toast) で toastDuration を取得します。これは nextTick でも取得できます。transition active はアニメーション プロセス全体にわたって存在し、requestAnimationFrame はブラウザーの再描画 (ペインター) フック関数に属しているため、microtask よりも後で実行され、ここで取得します。

見せる

  • インスタンスのルート要素である Picker のインスタンスを取得します。
  • マウント属性をマークして、インストールされていることを示します。
  • show属性を監視し、showがfalseに設定されている場合はhide関数を呼び出す
  • 本体の下に挿入

隠れる

  • Mountedプロパティをfalseにリセットします
  • メモリを解放するために、show関数で定義されたティアダウンリスニング関数を削除します。
  • 実際のDOMを削除するフック関数として遅延器を設定する

削除にsetTimeoutを使用する理由

監視遷移の使用に問題があります:

Vue自体は、トランジションコンポーネントの子ノードのtransitionend(またはanimationend)をリッスンします。
アニメーションが完了すると、トランジション クラスは削除され、transition プロパティは消えます。
ドキュメントによると、transition-propertyが消えた後はtransitionフック関数はトリガーされず、その後はトリガーできなくなります。
transitionend関数により、removeが呼び出されず、以前のToastConainerが残る可能性があります。

取り除く

削除関数は実際のDOMを削除し、遅延器をクリアし、タイマーとピッカーインスタンスをnullに設定し、GCを呼び出します。

子コンポーネントの更新

Picker コンポーネントが完了した後、コンポーネント内の props が更新されていないことがわかったので、ここで手動でコンポーネントの更新をトリガーする関数を記述します。コンポーネント vnode には 4 つのフック関数があります。更新時に prepatch が呼び出されます。値は 2 つあります。1 つ目は最後の vnode で、2 つ目は変更された vnode です。したがって、元の vnode と Component を PickerCommand 関数で diff の古い vnode として prepatch します。この関数を呼び出すと、コンポーネントを更新できます。

結論

Picker コンポーネントは単なる例であり、これを実装するためにさらに多くのメソッドを使用できます。モバイル端末での Vue2.x Picker のグローバルコール実装に関するこの記事はこれで終わりです。Vue2.x Picker のグローバルコールに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue Vant でのピッカーコンポーネントの使用
  • vue-week-picker は週ごとの切り替えをサポートするカレンダーを実装します
  • Vue は iOS ネイティブ ピッカー効果と実装のアイデアを実装します
  • Vue 学習 mintui ピッカー セレクターで州と市の二次リンク例を実現
  • Vue mint-ui ピッカーの使用に関する学習ノート

<<:  Centos7.3 で mysql5.7.18 をインストールして初期パスワードを変更する方法

>>:  ファイル書き込みを使用して Linux アプリケーションをデバッグする方法

推薦する

MySQL の遅いクエリとクエリ再構築方法の記録

序文スロークエリとは何か、またスロークエリを最適化するにはどうすればよいか。以下では、これら 2 つ...

MySQL における between の境界と範囲の説明

境界範囲間のmysql間の範囲は両側の境界値を含む例: 3 から 7 までの id は、id >...

UrlRewriter のキャッシュ問題と関連する一連の調査

ウェブサイト機能を開発する場合、セッション キャッシュを時間内にクリアできません。一連の探索が始まり...

Docker ベースの Selenium 分散環境の構築

1.画像をダウンロードするdocker pull selenium/hub docker pull ...

Linux システムの busybox に mkfs.vfat コマンドを移植する

オーディオおよびビデオ ファイルを保存するためのディスク寿命を延ばすには、ディスクをフォーマットする...

フロントエンドページのスライド検証を実装するための JavaScript + HTML

この記事では、フロントエンドページのスライド検証を実装するためのJavaScript + HTMLの...

Linux で Redis のリモート接続を実装する方法

LinuxにRedisをインストールしたら、Javaを使って接続します。Javaコードは次のとおりで...

透明な入力ボックスにアイコンを追加する HTML コード

最近、弁護士推薦のウェブサイトを作成していたのですが、検索ボックスに問題がありました。検索ボックス内...

さまざまなHTTPリターンステータスコードの詳細な説明

サイト上のページを表示するためのリクエストがサーバーに送信されると(たとえば、ユーザーがブラウザでペ...

JavaScript ES6 分割演算子の理解と応用

目次序文脱構築記号の役割使い方分割割り当ての適用アプリケーションの簡単な紹介JSONデータを抽出する...

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

この記事では、MySQL 8.0.20 winx64 のインストールと設定方法を次のように説明します...

同じドメイン名を持つ Nginx プロキシのフロントエンドとバックエンドの分離プロジェクトの完全な手順

フロントエンド プロジェクトとバックエンド プロジェクトは分離されており、フロントエンドとバックエン...

vue3ソースコード解析の簡単な実装方法

目次序文🍹準備🍲vue3 の使い方🍖 実装要約する序文最近、私の最初の公式 vue3 + ts プロ...

JavaScript PromiseとAsync/Awaitの詳細な説明

目次概要4つの例例1: 誕生日で説明する約束の基本例2: 数字当てゲーム例3: Web APIから国...

MySQL の遅いクエリを見つける方法

序文誰もが日常業務で SQL の最適化を経験したことがあると思います。したがって、最適化の前に、遅い...