Entwicklungsdetails von Vue3-Komponenten

html
<Vorlage>
    <a-layout-header Klasse="Header">
      <div Klasse="Logo" />
      <a-Menü
          Thema="dunkel"
          Modus="horizontal"
          v-Modell: ausgewählteSchlüssel="ausgewählteSchlüssel1"
          :style="{ Zeilenhöhe: '64px' }"
      >
        <a-menu-item key="1">Navigation 11122</a-menu-item>
        <a-menu-item key="2">Navigation 2</a-menu-item>
        <a-menu-item key="3">Navigation 3</a-menu-item>
      </a-Menü>
    </a-layout-header>
</Vorlage>

<script lang="ts">
importiere { defineComponent } von „vue“;

exportiere StandarddefiniereKomponente({
  Name: "TheHeader",
});
</Skript>

html
<Vorlage>
  <a-layout-footer style="text-align: center">
    Software Tester©2021 Erstellt von Liuge20211017
  </a-layout-footer>
</Vorlage>

<script lang="ts">
importiere { defineComponent } von „vue“;

exportiere StandarddefiniereKomponente({
  Name: 'TheFooter',
});
</Skript>

html
<Vorlage>
  <a-Layout>
    <der-Header></der-Header>
    <Router-Ansicht/>
    <der-Fußzeile></der-Fußzeile>
  </a-layout>
</Vorlage>

<Stil>
#Komponenten-Layout-Demo-Oberseite-2 .logo {
  schweben: links;
  Breite: 120px;
  Höhe: 31px;
  Rand: 16px 24px 16px 0;
  Hintergrund: rgba(255, 255, 255, 0,3);
}

.ant-row-rtl #Komponenten-Layout-Demo-Oberseite-2 .logo {
  schweben: rechts;
  Rand: 16px 0 16px 24px;
}

.site-layout-hintergrund {
  Hintergrund: #fff;
}
</Stil>
<Skript>
importiere TheHeader aus "@/components/the-header";
importiere TheFooter aus "@/components/the-footer";

Standard exportieren {
  Komponenten:
    DerHeader,
    Fußzeile
  }
}
</Skript>

html
<Vorlage>
  <a-Layout>
    <a-layout-sider width="200" style="Hintergrund: #fff">
      <a-Menü
          Modus="inline"
          v-Modell:selectedKeys="selectedKeys2"
          v-Modell:openKeys="openKeys"
          :Stil="{ Höhe: '100%', Rahmen rechts: 0 }"
      >
        <a-sub-menu key="sub1">
          <Vorlage #Titel>
                <span>
                  <Benutzer-umrissen />
                  Unternavigation 1
                </span>
          </Vorlage>
          <a-menu-item key="1">Option1</a-menu-item>
          <a-menu-item key="2">Option2</a-menu-item>
          <a-menu-item key="3">Option3</a-menu-item>
          <a-menu-item key="4">Option4</a-menu-item>
        </a-Untermenü>
        <a-sub-menu key="sub2">
          <Vorlage #Titel>
                <span>
                  <laptop-umrissen />
                  Unternavigation 2
                </span>
          </Vorlage>
          <a-menu-item key="5">Option 5</a-menu-item>
          <a-menu-item key="6">Option6</a-menu-item>
          <a-menu-item key="7">Option 7</a-menu-item>
          <a-menu-item key="8">Option8</a-menu-item>
        </a-Untermenü>
        <a-sub-menu key="sub3">
          <Vorlage #Titel>
                <span>
                  <Benachrichtigung-umrissen />
                  Unternavigation 3
                </span>
          </Vorlage>
          <a-menu-item key="9">Option9</a-menu-item>
          <a-menu-item key="10">Option10</a-menu-item>
          <a-menu-item key="11">Option11</a-menu-item>
          <a-menu-item key="12">Option12</a-menu-item>
        </a-Untermenü>
      </a-Menü>
    </a-layout-sider>
    <a-Layout-Inhalt
        :style="{ Hintergrund: '#fff', Polsterung: '24px', Rand: 0, min. Höhe: '280px' }"
    >
      Inhalt
    </a-layout-inhalt>
  </a-layout>
</Vorlage>

<script lang="ts">
importiere { defineComponent } von „vue“;

exportiere StandarddefiniereKomponente({
  Name: "Home",
});
</Skript>