モバイル端末での 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 をよろしくお願いいたします。

以下もご興味があるかもしれません: