1. コンポーネントの紹介アフィックス コンポーネントは、ページ要素を特定の視覚領域に固定するために使用されます。 1.1 プロパティ
1.2 イベント
2. ソースコード分析2.1 テンプレート<テンプレート> <div ref="root" class="el-affix" :style="rootStyle"> <div :class="{'el-affix--fixed': state.fixed}" :style="affixStyle"> <スロット></スロット> </div> </div> </テンプレート> テンプレート部分は非常にシンプルで、スロットを通じてコンテンツを受け取ります 2.2 スクリプト// いくつかのコアコード、コードの順序は調整されています setup(props, { emitting }) { // ターゲットコンテナ参照 定数ターゲット = ref(null) // ref を修正し、テンプレートの ref 属性と連携して HTML 要素を取得します。const root = ref(null) // スクロールコンテナ参照 定数スクロールコンテナ = ref(null) // 固定状態 const state = reactive({ 修正: false、 height: 0, // ルートの高さ width: 0, // ルートの幅 scrollTop: 0, // documentElement のスクロールトップ clientHeight: 0, // documentElement の clientHeight 変換: 0, }) マウント時(() => { // 受信ターゲットに基づいてターゲットコンテナを決定する if (props.target) { ターゲット値 = document.querySelector(props.target) if (!target.value) { 新しいエラーをスローします(`ターゲットが存在しません: ${props.target}`) } } それ以外 { ターゲット値 = document.documentElement } // 固定要素に応じて、上方向のスクロールコンテナを検索します scrollContainer.value = getScrollContainer(root.value) // スクロールコンテナのスクロールイベントをリッスンします on(scrollContainer.value, 'scroll', onScroll) // 固定要素のサイズ変更イベントをリッスンします。addResizeListener(root.value, updateState) }) // スクロールコンテナのスクロールイベントの応答関数 const onScroll = () => { // 固定状態を更新する updateState() 出力('スクロール', { スクロールトップ: state.scrollTop、 固定: state.fixed、 }) } // 固定状態を更新する function const updateState = () => { 定数 rootRect = root.value.getBoundingClientRect() 定数 targetRect = target.value.getBoundingClientRect() 状態.height = ルート矩形.height 状態.幅 = ルート矩形.幅 state.scrollTop = scrollContainer.value === window ? document.documentElement.scrollTop : scrollContainer.value.scrollTop state.clientHeight = document.documentElement.clientHeight props.position === 'top'の場合{ もしprops.targetが 定数の差 = targetRect.bottom - props.offset - state.height // targetRect.bottom > 0 は、固定ピンが常にコンテナー内に保持され、範囲を超えると非表示になることを意味します state.fixed = props.offset > rootRect.top && targetRect.bottom > 0 // 次のシナリオを処理するために使用されます: スクロール処理中に、ターゲット コンテナーの表示領域がピン全体を表示するのに十分でない場合は、ピンをオフセットしてその一部のみを表示する必要があります。 state.transform = Difference < 0 ? Difference: 0 } それ以外 { state.fixed = props.offset > rootRect.top } } それ以外 { もしprops.targetが 定数の差 = state.clientHeight - targetRect.top - props.offset - state.height state.fixed = state.clientHeight - props.offset < rootRect.bottom && state.clientHeight > targetRect.top state.transform = 差 < 0 ? -差: 0 } それ以外 { state.fixed = state.clientHeight - props.offset < rootRect.bottom } } } // 固定状態の変化を監視し、変更イベントを発行します watch(() => state.fixed, () => { 出力('change'、状態.fixed) }) // プロパティを計算し、ネイルの状態に応じてネイルのスタイルを自動的に更新します。const affixStyle = computed(() => { 状態が固定されている場合 戻る } 定数オフセット = props.offset ? `${props.offset}px` : 0 const transform = state.transform ? `translateY(${state.transform}px)` : '' 戻る { 高さ: `${state.height}px`, 幅: `${state.width}px`, 上部: props.position === 'top' ? オフセット: ''、 下部: props.position === 'bottom' ? オフセット: ''、 変換: 変換、 zIndex: props.zIndex、 } }) } 2.3 実装の概要:
Element Plus の Affix ピンニングの実装に関するこの記事はこれで終わりです。Element Affix ピンニングに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: sqlite3 から mysql に移行するときに起こりうる問題のコレクション
>>: VMware および CentOS システムのインストール方法 - ルート パスワードをリセットする
ポートを使用して MySQL をインストールした後、しばらくすると /var の容量が不足しているこ...
序文かつて、難しい問題に遭遇しました。タワークレーンからスイングハウスを落下させる必要がありましたが...
1. 以前 QT5.13 バージョンをダウンロードしましたが、インストール後、Qtcreator を...
フロントエンド開発者にとって、さまざまな主要ブラウザのさまざまなバージョンでコードが適切に動作するこ...
序文私はプログラマーとしてスタートした PHP プログラマーです。これまで、トレーニング コースで勉...
導入インターネット アプリケーションの普及に伴い、膨大なデータの保存とアクセスがシステム設計における...
各データベース内の各テーブルのサイズをカウントすることは、データ ガバナンスの最も単純な要件の 1 ...
序文常にエラーが発生するため、MySQL データベースに接続するプロセスを記録します。接続プロセス1...
前回の記事ではMySql8.0.19のインストール手順を紹介しました。必要な方はクリックしてご覧くだ...
1. インデックスの役割一般的なアプリケーション システムでは、読み取りと書き込みの比率は約 10:...
この記事では、モバイルデバイス上の 1 ピクセルの境界線の問題を解決する 5 つの方法を紹介します。...
前面に書かれたNginx は単なるリバース プロキシおよび負荷分散サーバーではなく、電流制限、キャッ...
Ubuntu に jdk をインストールする: [リンク] UbuntuにEclipseをインストー...
目次1. 目的2. 環境整備1. 基本情報2. データベース環境の準備3. データベースを構築し、サ...
0. システム要件CPU I5-10400F以上メモリ 16 GB、32 GBのメモリが最適ハードド...