Beispiel für die Implementierung einer Komponente mit fester Unterseite in Vue

<Vorlage>
  <div id="app">
    <div Klasse="Haupt">
      <img alt="Vue-Logo" src="./assets/logo.png">
      <HelloWorld msg="Willkommen bei Ihrer Vue.js-App"/>
      <img alt="Vue-Logo" src="./assets/logo.png">
    </div>
    <div class="footer">Dies ist eine unten fixierte Schaltfläche</div>
  </div>
</Vorlage>

<Skript>
importiere HelloWorld aus './components/HelloWorld.vue'

Standard exportieren {
  Name: "App",
  Komponenten:
    Hallo Welt
  }
}
</Skript>

<Stil>
:Wurzel{
  --Fußzeilenhöhe: 50px;
}
Körper {
  Polsterung: 0;
  Rand: 0;
}
#app {
  Schriftfamilie: Avenir, Helvetica, Arial, serifenlos;
  -webkit-font-smoothing: Kantenglättung;
  -moz-osx-font-smoothing: Graustufen;
  Textausrichtung: zentriert;
  Farbe: #2c3e50;
  Rand oben: 60px;
}
.hauptsächlich{
  Polsterung unten: var(--footer-height);
  Überlauf-y: automatisch;
}
.Fußzeile{
  Position: fest;
  unten: 0;
  Breite: 100 %;
  Zeilenhöhe: var(--footer-height);
  Hintergrund: #42b983;
  Farbe: #fff;
}
</Stil>

<Vorlage>
  <div id="app">
    <div Klasse="Haupt">
      <img alt="Vue-Logo" src="./assets/logo.png">
      <HelloWorld msg="Willkommen bei Ihrer Vue.js-App"/>
      <img alt="Vue-Logo" src="./assets/logo.png">
    </div>
    <div Klasse="Fußzeile" v-if='isShow'>
      <div class="footer-content">Dies ist eine unten fixierte Schaltfläche</div>
    </div>
  </div>
</Vorlage>

<Skript>
importiere HelloWorld aus './components/HelloWorld.vue'

Standard exportieren {
  Name: "App",
  Komponenten:
    Hallo Welt
  },
  Daten() {
    zurückkehren {
      isShow: true
    }
  },
}
</Skript>

<Stil>
:Wurzel{
  --Fußzeilenhöhe: 50px;
}
Körper {
  Polsterung: 0;
  Rand: 0;
}
#app {
  Schriftfamilie: Avenir, Helvetica, Arial, serifenlos;
  -webkit-font-smoothing: Kantenglättung;
  -moz-osx-font-smoothing: Graustufen;
  Textausrichtung: zentriert;
  Farbe: #2c3e50;
  Rand oben: 60px;
}
.hauptsächlich {
  Überlauf-y: automatisch;
}
.Fußzeile {
  Höhe: var(--footer-height);
}
.Fußzeileninhalt {
  Position: fest;
  unten: 0;
  Breite: 100 %;
  Zeilenhöhe: var(--footer-height);
  Hintergrund: #42b983;
  Farbe: #fff;
}
</Stil>