So machen Sie React-Komponenten im Vollbildmodus

einführen

Dieser Artikel basiert auf React + antd um eine vollständige全屏demo zu demonstrieren.

Der Grund ist, dass mir der Entwickler sql編輯器輸入框relativ klein ist und kein Vergrößern unterstützt, was nicht sehr praktisch ist. Ich hoffe, dass es im Vollbildmodus angezeigt werden kann, und da ich dachte, dass ich es in Zukunft vielleicht brauchen könnte, habe ich es studiert und aufgezeichnet.

Eigentlich finde ich es nicht sehr klein (orz)

Vollbild

Sie haben sicher schon einmal die Schaltfläche全屏auf der Webseite gesehen. Wenn Sie darauf klicken, wird die Seite im Vollbildmodus angezeigt. Diese Schaltfläche wird häufig in代碼編輯器angezeigt.

Das Bild oben zeigt den Effekt von LeetCode im Vollbildmodus, wobei das Menü und andere內容weggelassen werden.

Es scheint, dass es很多種. Lassen Sie mich Ihnen sagen, was ich denke.

• Leetcode ist nur eine Vollbildseite
• F11 Wir können F11 drücken, um in den Vollbildmodus zu wechseln, der in Chrome integriert ist und keine Codeänderung erfordert
• Das Ändern des DOM ist eigentlich dasselbe wie die erste Methode, aber es wird einen Teil des Browserinhalts verbergen

Wie im Bild oben gezeigt, ist瀏覽器Shell verschwunden.

Die Nutzung des Vollbildmodus

Was den Vollbildmodus betrifft, scheint er notwendiger zu sein, wenn Sie sich dem Lesen投入möchten, genauso wie die Leute gerne看電影. Dabei geht es vor allem darum, Komponenten放大, um das Tippen/Lesen angenehmer zu gestalten.

Installieren Sie react-full-screen

// Garn fügt React-Vollbild hinzu
npm installiere react-full-screen --save

Installieren Sie diese Bibliothek mit yarn oder npm. Auf der offiziellen Website gibt es einige Demos, der Link ist hier.

Schreiben Sie eine einfache Komponente

Hier ist der Code direkt. Es ist nicht viel代碼und er ist leicht zu verstehen.

importiere React, { useState } von "react";
importiere ReactDOM von „react-dom“;
importiere "antd/dist/antd.css";
importiere "./index.css";
importiere { FullscreenOutlined, FullscreenExitOutlined } aus "@ant-design/icons";
importiere { Tooltip, Karte, Spalte, Zeile } von "antd";
importiere { FullScreen, useFullScreenHandle } von "react-full-screen";

const App = () => {
  // Definieren Sie die Variable „full“, damit sie mit Vollbild- und Nicht-Vollbildstilen kompatibel ist. Beispielsweise beträgt die Höhe von „full“ 200 und die Höhe von „nicht-full“ 100
  const [voll, setzeVoll] = useState(false);
  //Erstelle einen FullScreen-Handle
  const handle = useFullScreenHandle();

  zurückkehren (
    <div Stil={{ Hintergrund: "#ececec", Höhe: 500 }}>
      <Zeilensteg={[8, 8]}>
        <Spalte span={8}>
          <Card style={{ height: 500 }}>Linke Karte</Card>
        </Col>
        <Spalte span={16}>
          <Vollbild
            Griff={Griff}
            beiÄnderung={setFull}
            Stil={{ Hintergrund: "#ffffff" }}
          >
            <Kartenstil={{ Höhe: 500 }}>
              <div>
                <Tooltip title="Vollbild">
                  <VollbildOutlined
                    Stil={{ Schriftgröße: 16 }}
                    beiKlick={() => {
                      // Klicken Sie, um „full“ auf „true“ zu setzen, und rufen Sie dann die Enter-Methode des Handles auf, um in den Vollbildmodus zu wechseln. setFull(true);
                      handle.eingeben();
                    }}
                  />
                </Tooltip>
                <Tooltip title="Vollbildmodus beenden">
                  <VollbildBeendenGliedert
                    Stil={{ Schriftgröße: 16, linker Rand: 16 }}
                    // Vollbildmodus beenden und „full“ auf „false“ setzen
                    beiKlick={() => {
                      setzeVollständig(falsch);
                      griff.ausgang();
                    }}
                  />
                </Tooltip>
              </div>
              <div>Angenommen, dies ist ein Editor</div>
            </Karte>
          </Vollbild>
        </Col>
      </Zeile>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("container")); 

So sieht es aus. Dem Code sind注釋hinzugefügt, Sie können ihn also einfach ansehen. Da es in codesandbox nicht unterstützt wird, habe ich es in ein Antd Pro-Projekt eingefügt, um Ihnen die Wirkung zu zeigen.

Auf diese Weise haben wir den Effekt erreicht, dass nur編輯器vergrößert und andere unwichtige Teile (der linke Teil) ausgeblendet werden.

Probleme

Dies ist jedoch bei weitem nicht genug, hier sind noch einige Details zu優化.

• Der Standardhintergrund ist schwarz, was nicht benutzerfreundlich ist. Wir müssen den Stil festlegen.
• Wir sollten die Editorhöhe im Vollbildmodus vergrößern
• Es gibt auch dunkle Gruben, ich werde später darüber sprechen

Besiege sie einen nach dem anderen

Hintergrundfarbe

Die von uns verwendete Bibliothek umschließt standardmäßig ein globales div . Bei Vollbild ist die Klasse .fullscreen.fullscreen-enabled , und wenn nicht, ist sie fullscreen .

Daher können wir das folgende CSS im globalen/Komponentenstil schreiben:

.vollbild.vollbild-aktiviert {
  Hintergrund: #fff;
  Polsterung: 24px;
}

Sie können sehen, dass dieser Stil生效hat, und wir haben eine Polsterung hinzugefügt, damit die Karte nicht so aussieht, als wäre擠到邊上.

hoch

Wir haben zuvor die Variable „full“ festgelegt, daher ändern wir den Code, um die Höhe basierend auf „full“ zu bestimmen.

Sie können sehen, dass sich高度der Box geändert hat.

Erweiterungen

Wenn Sie glauben, dies sei das Ende, liegen Sie大錯特錯. Lassen Sie uns als Nächstes über dunkle Gruben sprechen.

In der Antd-Komponente sind Modal/Drawer/Message usw. alles DOM-Elemente, die im Textkörper generiert werden. Auf遇到什么問題呢?

Im全屏模式können Sie keine Dialogfelder/Nachrichtenaufforderungen usw. sehen.

Aber好在antd entsprechende Parameter zur Steuerung der Montageelemente von Dom.

Modal

Modal kann wie folgt gelöst werden. Zuerst legen wir eine full_screen ID fest:

Beachten Sie, dass diese ID in der FullScreen-Komponente enthalten sein muss.

Anschließend fügen wir Modal.info und Modal-Komponenten folgende Parameter hinzu:

Hinweis: Das Modal hier ist nicht in meiner Demo enthalten, es gehört zum Erweiterungsteil. Das Schreiben einer modalen Komponente ist nicht kompliziert, Sie können es selbst ausprobieren.

Modal.info-API

Modal.info({
  Titel: „CUD-Anforderungsparameter“,
  Breite: 800,
  // Beachten Sie die Ergänzung von getContainer: document.getElementById('full_screen')
  })

Nachricht

Übergeben Sie die Methode getContainer durch message.config:

Ich habe hier keine gute Lösung gefunden. Es ist ziemlich mühsam, message.info jedes Mal zu konfigurieren. Wenn全局配置, kann es zu Problemen kommen. Wenn Sie eine bessere Lösung haben, hinterlassen Sie bitte eine Nachricht.

Dies ist das Ende dieses Artikels über die Implementierung der Vollbildkomponente von React. Weitere relevante Inhalte zur Vollbildkomponente von React finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!