Beispiel für eine Vue-Datenanzeige auf einem großen Bildschirm

Um die Anforderungen effizient zu erfüllen und aufgeblähte Komponentenbibliotheken und das Neuerfinden des Rades zu vermeiden, habe ich vor einiger Zeit viele Großbildanzeigeprojekte durchgeführt. Heute möchte ich den praktischen Prozess der Großbildanzeige mit Ihnen teilen. Am Anfang habe ich die Dataview-Komponentenbibliothek verwendet und dann festgestellt, dass ich nicht zu viele ihrer gekapselten Komponenten benötigte, und auf der mobilen Seite gab es Probleme mit Stilverwirrung. Also habe ich mir seine Implementierungsmethode angesehen und eine adaptive Komponente für große Bildschirme erstellt. Und nun ohne weitere Umschweife die Renderings:

Rendern

Es muss an große Anzeigebildschirme aller Größen angepasst werden, und auf Mobiltelefonen kann der Effekt zum Anzeigen vergrößert oder verkleinert werden. Ich habe hier einen Code hinzugefügt, um den Körper proportional zu skalieren und so den Effekt keiner Verformung und einer allgemeinen Anpassung zu erzielen.

 <Skript>
        //Seitenskalierung public function resizePage() {
          // Höhe des Fensters abrufen var clientW = window.innerWidth
          var clientH = window.innerHeight
          // Anfängliches Fenster-zu-Body-Verhältnis var bi = clientW / 1920
          // Breite und Höhe des Bodys festlegen – kann den tatsächlichen Gegebenheiten entsprechend angepasst werden document.getElementsByTagName('body')[0].style.width = "1920px"
          document.getElementsByTagName('body')[0].style.height = "1080px"
          document.getElementsByTagName('body')[0].style.transform = 'scale(' + bi + ',' + bi + ')'
          document.getElementsByTagName('body')[0].style.transformOrigin = 'links oben 0'
          
        }
        resizePage()
        // Seitengröße ändern();
        Fenster.onresize = Funktion () {
          setzeTimeout(()=>{
          Seite vergrößern();

          },200)  
        }        
    </Skript>

Code-Implementierung:

Kapseln Sie eine adaptive große Komponente ein, die das Hintergrundbild und die Gesamtwirkung des großen Bildschirms festlegen kann. Der Rest verwendet grundsätzlich die Echart-Komponentenbibliothek, da keine speziellen benutzerdefinierten Symbole erforderlich sind. Es gibt also nicht viel Personalisierung.

<Vorlage>
  <div id="dv-Vollbild-Container">
    <Vorlage>
      <Steckplatz></Steckplatz>
    </Vorlage>
  </div>
</Vorlage>

<Skript>
Standard exportieren {
  
  montiert(){
  }
}
</Skript>

<style lang="less">
#dv-Vollbild-Container {
  Position: fest;
  oben: 0px;
  links: 0px;
  Überlauf: versteckt;
  Transform-Origin: links oben;
  Z-Index: 999;
  Breite: 100 %;
  Höhe: 1080pxee
}
</Stil>

<Vorlage>
  <div Klasse="voll">
    <dv-Vollbild-Container ref="voll">
       Inhalt
    </dv-Vollbild-Container>
  </div>
</Vorlage>
<Skript>
 
importiere fullScreenContainer aus './fullscreen'
Standard exportieren {
  Komponenten: {
    'dv-Vollbild-Container':VollbildContainer
  },
  montiert(){
   
  },
  erstellt(){
  },
  Methoden:{
    
  }
}
</Skript>
<style lang="less">
.voll {
  #dv-Vollbild-Container {
    Hintergrund: #000222 url(../assets/images/bg.png);
    Hintergrundgröße: 100 % 100 %;
    Überlauf: automatisch;
    
    .voller-großer-Rand {
      .Inhalt {
        Polsterung: 0 38px 0 38px;
        Breite: berechnet (100 % – 76 Pixel);
        Anzeige: Flex;
      }
    }
  }
  
}
</Stil>

Zusammenfassen:

Oben sind die Auswirkungen und Methoden aufgeführt, mit denen Sie selbst eine Gesamtanpassung an den großen Bildschirm erreichen können. Zunächst möchten Sie vielleicht faul sein und Dataview direkt verwenden, aber dies kann schwierig sein, wenn Sie es benötigen, oder Sie möchten möglicherweise einen Satz zu aufgeblähter Komponentenbibliotheken installieren, was Ihre Zwangsstörung nur schwer lindern kann. Ich hoffe, Sie haben eine bessere Kapselungsmethode. Ich habe nur einen kleinen Teil der Oberfläche implementiert und hoffe, dass es für Studenten hilfreich ist, die gerade erst anfangen.

Dies ist das Ende dieses Artikels über das Beispiel der Vue-Großbilddatenanzeige. Weitere relevante Vue-Großbilddateninhalte finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!