大画面要素の解像度適応を実装する Vue 命令の詳細な説明-Vue.js-php.cn

大画面要素の解像度適応を実装する Vue 命令の詳細な説明

WBOY

リリース： 2022-10-02 09:00:28

転載

2857 人が閲覧しました

この記事では、vue に関する関連知識をお届けします。主に、一般的な適応スキームや CSS スケーリングスキームなど、大画面要素の解像度適応を実装するための Vue 命令の詳細な説明を紹介します。ぜひ一緒にご覧ください。皆さんのお役に立てれば幸いです。

大画面要素の解像度適応を実装する Vue 命令の詳細な説明

[関連する推奨事項: javascript ビデオチュートリアル、vue.js チュートリアル]

フロントエンドを使用するデータセンター (ミドルプラットフォーム) およびその他のコンセプトの継続的な開発、およびモノのインターネットデバイスの更新と普及により、データを集中表示するために 1 つまたは複数の大きなビジュアルスクリーンをシステムに追加することを希望する所有者 (プロジェクト) が増えています。上司もそれを「状況」と呼ぶことを好みます。

もちろん、プログラマはプロジェクトを完了する限り、「上司」が何を考えているかは一般に気にしません。しかし、次のような問題がよく発生します。大画面のテンプレートがあるが、ユーザーのブラウザの解像度が十分ではない、ブックマークバーがあるテンプレートとないテンプレート、または全画面のテンプレートと小さなウィンドウだけのテンプレートがあります。このように、コードがさまざまな解像度のシナリオに適応するための要件があります。

1. 一般的な適応ソリューション

通常使用する Web 側の適応ソリューションには主に次のものがあります:

vw/vh はパーセンテージで実装され、ウィンドウサイズに応じて要素を自動的に調整できます。
fontSize を rem と組み合わせて、「単位幅」の統一を実現します。
さまざまな解像度範囲に応じてページレイアウトを調整します
最小幅の中央レイアウト

最新の画面適応ソリューションの原則は上記の方法に基づいていますが、これらの方法には大きな欠点もあります。ブラウザテキストには最小幅があります。サイズ！

解像度 1080p 以上の通常の画面では、ほとんどの設計図面の比率と表示効果を完全に復元できます。ただし、特定のシステムにページコンテンツが多すぎる場合、またはブラウザで使用されている解像度 (物理解像度ではない) が完全な表示要件を満たしていない場合、上記の方法を使用すると、 テキストのサイズが計算される可能性があります。ブラウザの最小フォントサイズ より小さい場合、テキスト幅が要素を超えるため、ページスタイルが崩れる可能性があります。

中央レイアウトと最小幅は表示効果を確保できますが、大画面プロジェクトには適していません。

2. CSS3 スケーリングソリューション

上記の解決策が満足できない場合、通常、誰もが別の解決策、CSS3 スケールスケーリングを使用します。

設計図のサイズ比率と実際のページ表示領域サイズを計算し、要素の拡大縮小率を動的に調整します。

個人的には、これが小さな解像度で表示コンテンツとスタイルを保持する最良の方法だと思います。

もちろん、この方法にはまだいくつかの欠点があります。

スケーリング後、端の表示がぼやける可能性があります。
内部に Canvas 要素がある場合、ぼやけてしまう可能性があります。キャンバスの内側がぼやける原因になります。コンテンツのレンダリングに歪みが発生します。
Amap 1.x では、イベント座標オフセットが発生します (2.0 は修正されています)
...

3. カプセル化スケーリング命令

ここでは、Vue のカスタム命令の簡単なレビューを示します: カスタム命令を構成し、パラメーターをバインドすることにより、対応する処理ロジックが、component/ などの異なる時点で実行されます。要素のロード、更新、および破棄。

Vue のカスタム命令には、次のフック関数が含まれます。

bind: 命令バインディングの解析時に実行され、一度のみ実行されます。
inserted: 親を挿入します。ノードが作成されたときに実行されます。
update: コンポーネントが更新をトリガーしたときに実行されます。
componentUpdated: すべてのコンポーネントが更新された後に実行されます。
unbind: 要素がバインドされていない (破棄された) ときにのみ実行されます。 1 回実行

#ここでは、初期化中に要素のスケーリングを調整するためにブラウザのサイズ変更イベントをバインドするだけでよいため、コードロジックを最適化しリソースを削減するために、挿入された設定のみが必要です。消費などの場合は、アンバインド段階でリサイズイベントのコールバック関数をキャンセルする必要もあります。

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

// 缩放指令
import Vue from "vue";
function transformScale(el, options) {
  const { target = "width", origin = "top left" } = options;
  Vue.nextTick(() => {
    // 获取显示区域高宽
    const width = window.innerWidth;
    const height = window.innerHeight;
    el.style.transformOrigin = origin;
    if (target === "ratio") {
      const scaleX = width / CONF.width;
      const scaleY = height / CONF.height;
      el.style.transform = `scaleX(${scaleX}) scaleY(${scaleY})`;
    } else {
      let scaleProportion = 1;
      if (target === "width") {
        scaleProportion = width / CONF.width;
      }
      if (target === "height") {
        scaleProportion = height / CONF.height;
      }
      el.style.transform = `scale(${scaleProportion})`;
    }
  });
}
function inserted(el, binding) {
  const options = binding.options || { passive: true };
  const callback = () => transformScale(el, binding.value);
  window.addEventListener("resize", callback);
  callback();
  el._onResize = {
    callback,
    options
  };
}
function unbind(el) {
  if (!el._onResize) {
    return;
  }
  const { callback } = el._onResize;
  window.removeEventListener("resize", callback);
  delete el._onResize;
}
export const Scale = {
  inserted,
  unbind
};
export default Scale;

ログイン後にコピー

説明: