Vue-Anpassungsmethode für Großbildschirme

Exportfunktion useIndex(appRef) {
  // * appRef zeigt auf den äußersten Container // * Timing-Funktion let timer = null
  // * Standard-Skalierungswert const scale = {
    Breite: '1',
    Höhe: '1'
  }
  // * Größe des Designentwurfs (px)
  Konstante Basisbreite = 1920
  Konstante Basishöhe = 1080

  // * Das beizubehaltende Verhältnis (Standard 2)
  // const baseProportion = parseFloat((Basisbreite / Basishöhe).toFixed(5))
  Konstante Basisproportion = 2
  const calcRate = () => {
    // Aktuelles Seitenverhältnis const currentRate = parseFloat((window.innerWidth / window.innerHeight).toFixed(5))
    wenn (appRef) {
      wenn (aktuellerSatz > Basisanteil) {
        // Gibt einen größeren Maßstab an.Breite = ((window.innerHeight * baseProportion) / baseWidth).toFixed(5)
        Maßstab.Höhe = (Fenster.Innenhöhe / Basishöhe).toFixed(5)
        appRef.style.transform = `Skala(${scale.width}, ${scale.height}) übersetzen(-50%, -50%)`
      } anders {
        // Zeigt einen höheren Maßstab an. Höhe = ((window.innerWidth / baseProportion) / baseHeight).toFixed(5)
        Maßstab.Breite = (Fenster.Innenbreite / Basisbreite).toFixed(5)
        appRef.style.transform = `Skala(${scale.width}, ${scale.height}) übersetzen(-50%, -50%)`
      }
    }
  }

  const resize = () => {
    Zeitüberschreitung löschen(Timer)
    Timer = setzeTimeout(() => {
      berechneRate()
    }, 200)
  }

  // Fenstergröße ändern und neu zeichnen const windowDraw = () => {
    window.addEventListener('Größe ändern', Größe ändern)
  }

  zurückkehren {
    appRef,
    Berechnungsrate,
    Fenster zeichnen
  }
}

<Vorlage>
  <div ref="appRef" Klasse="main">
    <div Klasse="Layout-Container">
    </div>
  </div>
</Vorlage>

<Skript>
importiere { useIndex } aus '@/utils/utilsDram.js'
Standard exportieren {
  montiert () {
    const { calcRate, windowDraw } = useIndex(this.$refs.appRef)
    berechneRate()
    windowDraw()
  }
}
</Skript>
<style lang="scss" scoped>
.hauptsächlich {
  Farbe: #d3d6dd;
  Breite: 1920px;
  Höhe: 1080px;
  Position: absolut;
  oben: 50 %;
  links: 50%;
  transformieren: übersetzen(-50 %, -50 %);
  Transform-Origin: links oben;

  .layout-container {
    Breite: 100 %;
    Höhe: 100%;
    }
   }
</Stil>