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

この記事では、vue に関する関連知識をお届けします。主に、一般的な適応スキームや CSS スケーリング スキームなど、大画面要素の解像度適応を実装するための 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;

説明:

命令は、比率計算方法とスケーリング位置を指定するオブジェクト パラメーターを受け取ります
• デフォルトのページ サイズを指定するように CONF オブジェクトをグローバルに構成します
• ページがロードされ、dom 要素を取得できることを確認するには、Vue.nextTick を呼び出す必要があります
• リッスン イベントを破棄する必要があります

コード全体は実際には非常に単純で、サイズ変更イベントをリッスンして要素のズーム率を調整するというものです。

しかし、ここでは、より多くの状況に適応するために少しの構成も作成しました:

• ターゲット設定を受信して​​比率の計算方法を確認します。幅または高さを統一スケーリング基準として使用することも、個別に計算することもできます。
• 変換の元の設定を受信して​​要素を確認しますさまざまな位置で オフセットのスケーリングを避けるために、さまざまな位置にズームできます。
• バインドされた要素のサイズは関係せず、デフォルトのサイズのみが必要です。コードを記述するときに、それに応じて要素のサイズを直接構成できます。設計図へ

もちろんこのコマンドも完璧とは言えず、手ぶれ補正がない、拡大縮小してもCSSで指定したサイズが変わらない、スクロールバーなど抜け道はまだたくさんあります。などが表示される傾向があります;

そして、以前の理由により、このプロジェクトには多くのチャートやマップも含まれており、表示上の問題が発生することが多いため、後でいくつかの新しい指示が追加されますが、解像度の適応は実際の状況に基づいて決定する必要があります。

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

以上が大画面要素の解像度適応を実装する Vue 命令の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。