Detaillierte Erläuterung der Vue-Anweisung zur Implementierung der Auflösungsanpassung großer Bildschirmelemente

Dieser Artikel vermittelt Ihnen relevantes Wissen über vue. Er enthält hauptsächlich eine detaillierte Erläuterung der Vue-Anweisungen zur Implementierung der Auflösungsanpassung großer Bildschirmelemente, einschließlich gängiger Anpassungsschemata und CSS-Skalierungsschemata usw. Schauen wir uns das an. Ich hoffe, es hilft allen .

[Verwandte Empfehlungen: Javascript-Video-Tutorial, vue.js-Tutorial]

Mit der kontinuierlichen Weiterentwicklung der Front-End-Technologie, der kontinuierlichen Aktualisierung von Konzepten wie Rechenzentren (mittlere Plattformen) und dem Entwicklung von Internet-of-Things-Geräten Aktualisiert und populär, immer mehr Besitzer (Projekte) fügen dem System gerne einen oder mehrere große visuelle Bildschirme hinzu, um Datenänderungen, Standortänderungen usw. zentral anzuzeigen. Chefs nennen es auch lieber "Situation" .

Natürlich ist es Programmierern im Allgemeinen egal, was die „Chefs“ denken, solange sie das Projekt abschließen. Aber es gibt oft ein Problem wie dieses: Ich habe eine Vorlage mit großem Bildschirm, aber die Browserauflösung des Benutzers reicht nicht aus, oder einige haben eine Lesezeichenleiste und andere nicht, oder einige sind im Vollbildmodus und andere sind nur kleine Fenster. Auf diese Weise gibt es Anforderungen an den Code, um sich an verschiedene Auflösungsszenarien anzupassen.

1. Gängige Anpassungslösungen

Die von uns normalerweise verwendeten webseitigen Anpassungslösungen umfassen hauptsächlich Folgendes:

• vw/vh wird mit Prozentsatz implementiert, sodass Elemente automatisch an die Fenstergröße angepasst werden können
• fontSize Cooperate mit rem, um die Vereinheitlichung der „Einheitsbreite“ zu erreichen
• Passen Sie das Seitenlayout an unterschiedliche Auflösungsbereiche an
• Zentrales Layout, kooperieren Sie mit der Mindestbreite

Derzeit basieren die Prinzipien der meisten Bildschirmanpassungslösungen auf den oben genannten Methoden, aber diese Methoden haben auch große Nachteile: Browsertext hat eine Mindestgröße!

Auf normalen Bildschirmen mit einer Auflösung von 1080p und höher können die Proportionen und Anzeigeeffekte der meisten Designzeichnungen perfekt wiederhergestellt werden. Wenn jedoch in einem bestimmten System zu viel Seiteninhalt vorhanden ist oder die vom Browser verwendete Auflösung (nicht die physische Auflösung) nicht den vollständigen Anzeigeanforderungen entspricht, kann die Verwendung der oben genannten Methoden dazu führen, dass die berechnete Textgröße kleiner wird als die minimale Schriftgröße des Browsers Zu diesem Zeitpunkt kann es sein, dass der Seitenstil zusammenbricht, da die Textbreite das Element überschreitet.

Das mittlere Layout und die minimale Breite können den Anzeigeeffekt gewährleisten, sind jedoch nicht für Großbildprojekte geeignet.

2. CSS3-Skalierungslösung

Wenn die oben genannten Lösungen nicht ausreichen, wird normalerweise jeder eine andere Lösung verwenden: CSS3-Skalierungslösung.

Passen Sie das Skalierungsverhältnis von Elementen dynamisch an, indem Sie das Größenverhältnis der Entwurfszeichnung und die tatsächliche Größe des Seitenanzeigebereichs berechnen.

Persönlich denke ich, dass dies der beste Weg ist, den Anzeigeinhalt und -stil bei kleiner Auflösung beizubehalten.

Natürlich hat diese Methode noch einige Nachteile:

Nach der Skalierung kann die Kantendarstellung unscharf sein
• Wenn sich darin ein Canvas-Element befindet, kann es dazu führen, dass der Inhalt innerhalb der Canvas verzerrt dargestellt wird
• Amap 1 .x verursacht Ereignisse Koordinatenversatz (behoben in 2.0)
• ...

3. Kapseln Sie eine Skalierungsanweisung

Hier ist eine kurze Übersicht über die benutzerdefinierten Anweisungen von Vue: Durch Konfigurieren benutzerdefinierter Anweisungen und Bindungsparameter im Komponente/Element Die entsprechende Verarbeitungslogik wird zu unterschiedlichen Zeitpunkten ausgeführt, z. B. beim Laden, Aktualisieren und Zerstören.

Die benutzerdefinierten Anweisungen von Vue umfassen die folgenden Hook-Funktionen:

bind: wird ausgeführt, wenn die Anweisungsbindung analysiert wird, nur einmal ausgeführt
• inserted: wird ausgeführt, wenn der übergeordnete Knoten eingefügt wird
• update: wird ausgeführt, wenn die Komponente ein Update auslöst
componentUpdated: Wird ausgeführt, nachdem alle Komponenten aktualisiert wurden
• unbind: Wird ausgeführt, wenn das Element ungebunden (zerstört) ist, und nur einmal ausgeführt

Hier, weil wir nur das Größenänderungsereignis des Browsers binden müssen, um den Elementzoom während der Initialisierung anzupassen Nur Sie müssen nur das Einfügen konfigurieren. Um die Codelogik zu optimieren und den Ressourcenverbrauch zu reduzieren, müssen Sie natürlich auch eine Rückruffunktion des Größenänderungsereignisses in der Unbind-Phase abbrechen.

Der Code lautet wie folgt:

// 缩放指令
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;

Erklärung: Der

-Befehl empfängt einen Objektparameter, um die Proportionsberechnungsmethode und die Skalierungspositionierung anzugeben.
• Erfordert ein globales Konfigurations-CONF-Objekt, um die Standardseitengröße anzugeben.
• Um Stellen Sie sicher, dass die Seite vorhanden ist. Nach dem Laden können Sie das Dom-Element abrufen. Sie müssen Vue.nextTick aufrufen das Element durch Abhören des Größenänderungsereignisses.
• Aber hier habe ich auch eine kleine Konfiguration vorgenommen, um mich an mehr Situationen anzupassen:
• • Erhalten Sie eine Zielkonfiguration, um die Proportionsberechnungsmethode zu bestätigen. Sie können Breite oder Höhe als einheitlichen Skalierungsstandard verwenden oder diese separat berechnen.
  • Erhalten Sie die Ursprungskonfiguration der Transformation, um sicherzustellen, dass Elemente an verschiedenen Positionen skaliert werden können Zu vermeidende unterschiedliche Positionen Der Skalierungsversatz
  • bezieht sich nicht auf die Größe des gebundenen Elements. Beim Schreiben von Code ist nur die Standardgröße erforderlich. Sie können die Elementgröße direkt gemäß der Konstruktionszeichnung konfigurieren

  Natürlich diese Anleitung Man kann nicht sagen, dass es perfekt ist, es gibt immer noch viele Lücken. Beispielsweise gibt es kein Anti-Shake, die Skalierung ändert die durch CSS angegebene Größe nicht und es treten häufig Bildlaufleisten auf

  Und weil das vorherige Projekt auch viele beinhaltete; Bei Diagrammen und Karten kam es häufig zu Darstellungsproblemen, daher wird es später mehr geben. Es gibt einige neue Anweisungen, aber das Problem der Auflösungsanpassung muss noch anhand der tatsächlichen Situation ermittelt werden.

  【Verwandte Empfehlungen: Javascript-Video-Tutorial, vue.js-Tutorial】

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Vue-Anweisung zur Implementierung der Auflösungsanpassung großer Bildschirmelemente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!