Vue3 kapselt seine eigene Paging-Komponente

<Vorlage>
  <div Klasse="meine-pagination">
    <a href="javascript:;" :class="{ disabled: currentPage === 1 }" @click="changePage(false)">Vorherige Seite</a>
    <span v-if="currentPage > 3">...</span>
    <a
      href="javascript:;" 
      v-for="Element in Liste"
      :Schlüssel="Artikel"
      :Klasse="{ aktiv: aktuelleSeite === Element }"
      @click="Seiteändern(Element)"
      >{{ Artikel }}</a
    >
    <span v-if="currentPage < Seiten - 2">...</span>
    <a href="javascript:;" :class="{ disabled: currentPage === pages }" @click="changePage(true)">Nächste Seite</a>
  </div>
</Vorlage>
<Skript>
importiere { berechnet, ref } von 'vue-demi'
Standard exportieren {
  Name: 'MyPagination',
  Requisiten: {
    gesamt:
      Typ: Nummer,
      Standard: 80
    },
    Seitengröße: {
      Typ: Nummer,
      Standard: 10
    }
  },
  setup(Eigenschaften, { emittieren, Attribute }) {
    // Aktuelle Seite const currentPage = ref(attrs.currentPage)
    // Berechnen Sie die Gesamtzahl der Seiten const pages = computed(() => Math.ceil(props.total / props.pagesize))
    // Kombination der Seitenzahlenanzeige const list = computed(() => {
      const Ergebnis = []
      // Wenn die Gesamtzahl der Seiten kleiner oder gleich 5 Seiten ist, if (pages <= 5) {
        für (lass i = 1; i <= Seiten; i++) {
          Ergebnis.push(i)
        }
      } anders {
        // Wenn die Gesamtzahl der Seiten größer als 5 Seiten ist // Kontrollieren Sie das Vorhandensein oder Fehlen von Auslassungspunkten an den beiden Enden, und die Anzahl der angezeigten Seitenzahlen wird mit der ausgewählten Seitenzahl zentriert, wenn (currentPage.value <= 2) {
          für (lass i = 1; i <= 5; i++) {
            Ergebnis.push(i)
          }
        } sonst wenn (aktuellerSeitenwert >= 3 und aktuellerSeitenwert <= Seitenwert - 2) {
          für (lass i = currentPage.value - 2; i <= currentPage.value + 2; i++) {
            Ergebnis.push(i)
          }
        } sonst wenn (aktuellerSeitenwert > Seitenwert - 2) {
          für (let i = Seiten.Wert - 4; i <= Seiten.Wert; i++) {
            Ergebnis.push(i)
          }
        }
      }
      Ergebnis zurückgeben
    })
    // Klicken Sie auf die vorherige Seite, um die Seitenzahl zu ändern const changePage = type => {
      // Klicken Sie auf die Schaltfläche „Vorherige Seite“, wenn (Typ === false) {
        wenn (aktuellerSeitenwert <= 1) return
        aktuellerSeitenwert -= 1
      } sonst wenn (Typ === wahr) {
        // Klicken Sie auf die Schaltfläche „Nächste Seite“, wenn (currentPage.value >= pages.value) return
        aktuellerSeitenwert += 1
      } anders {
        // Klicken Sie auf die Seite currentPage.value = Typ
      }
      // Übergeben Sie die aktuelle Seitenzahl an die übergeordnete Komponente und führen Sie in diesem Ereignis zugehörige Vorgänge aus. emit('change-page', currentPage.value)
    }
    return { aktuelleSeite, Seiten, Liste, Seite ändern }
  }
}
</Skript>
<style scoped lang="weniger">
.meine-pagination {
  Anzeige: Flex;
  Inhalt ausrichten: zentriert;
  Polsterung: 30px;
  > ein {
    Anzeige: Inline-Block;
    Polsterung: 5px 10px;
    Rand: 1px durchgezogen #e4e4e4;
    Rahmenradius: 4px;
    Rand rechts: 10px;
    &:schweben {
      Farbe: @xtxColor;
    }
    &.aktiv {
      Hintergrund: @xtxColor;
      Farbe: #fff;
      Rahmenfarbe: @xtxColor;
    }
    &.deaktiviert {
      Cursor: nicht erlaubt;
      Deckkraft: 0,4;
      &:schweben {
        Farbe: #333;
      }
    }
  }
  > Spanne {
    Rand rechts: 10px;
  }
}
</Stil>

<XtxPaginierung 
:gesamt="gesamt" 
:Seitengröße="reqParams.Seitengröße" 
:aktuelleSeite="1" 
@change-page="Seite ändern" />