モバイル端末での 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 アプリケーションをデバッグする方法

推薦する

React で setInterval 関数を使用する例

この記事はWindows 10のシステム環境をベースに、Reactの学習と使用について説明しています...

Linux の EXT シリーズファイルシステムフォーマットの詳細な説明

Linux ファイルシステム一般的なハードディスクは上図のとおりです。各ディスクは複数のトラックに分...

Docker を使用して MySQL 5.7 および 8.0 マスター スレーブ クラスターをデプロイする方法

> MySQL 5.7 クラスタ マスターとスレーブをデプロイする (テストのみ)イメージバー...

Nginxの仕組みの詳細な説明

Nginxの仕組みNginx はコアとモジュールで構成されています。 Nginx 自体は実際にはほと...

Reactイベントスロットリング効果が失敗する理由と解決策

目次ここでの問題は次の通りです:解決策1:解決策2: コンストラクタで初期化を割り当てる採掘場の概要...

CentOS に MySQL 5.5 をインストールするための完全な手順

目次1. インストール前の準備、インストールパッケージのダウンロード1 インストールの準備2 インス...

SQLは、隣接する2行のデータに対して加算、減算、乗算、除算の演算を実行します。

SQL は、データを特定の順序で並べ替え、特定のフィールドでグループ化した後、隣接する 2 つのデ...

MySQL 8.0.12 のインストールと設定方法のグラフィック チュートリアル (Windows10)

この記事は、参考のためにMySQL 8.0.12のインストールグラフィックチュートリアルを記録してい...

Linux で crontab 出力リダイレクトが有効にならない問題の解決方法

質問LINUX では、定期的なタスクは通常、cron デーモン プロセス [ps -ef | gre...

MySQLフィールド定義でnullを使用しない理由の分析

NULL が頻繁に使用されるのはなぜですか? (1)Javaのnull Java の NullPoi...

TypeScript名前空間の説明

目次1. 定義と使用1.1 定義1.2 使用2. 複数のファイルに分割する3. エイリアス序文: T...

MySQLはOracleシーケンスに似たソリューションを実装しています

MySQLはOracleのようなシーケンスを実装しているOracle は通常、主キー フィールドを処...

SQL ストアド プロシージャの取得、データ取得、プロセス分析

この記事は主に、SQL のストアド プロシージャから返されたデータを取得するプロセスの分析を紹介しま...

Tomcat10 Catalinaのログの文字化けの問題を解決する

実行環境、Idea2020バージョン、Tomcat10、実行時にTomcat CatalinaLog...

Nginx ログ管理の概要

Nginx ログの説明アクセス ログを通じて、ユーザーの地理的起源、ジャンプ元、使用端末、特定の U...