So kapseln Sie Paging-Komponenten manuell in Vue3.0

<!-- Seite gibt die Standardseite an, die beim Initialisieren der Seitennummerierung angezeigt werden soll -->
    <XtxPagination @change-page='changePage' :pagesize='reqParams.pageSize' :total='gesamt' :page='1' />
    // Rufen Sie die Schnittstelle import {findCommentListByGoods } von '@/api/product.js' auf.
 Standard exportieren{
  aufstellen(){
  // Vorbereitung der Screening-Bedingungen const reqParams = reactive({
      // Aktuelle Seitenzahl Seite: 1,
      //Anzahl der Einträge pro SeiteSeitengröße: 10,
      // Gibt es ein Bild hasPicture: null,
      // Filterbedingungs-Tag: null,
      // Sortierfeld sortField: null
    })
    // Auf Parameteränderungen warten watch(reqParams, () => {
   findCommentListByGoods(goods.value.id, reqParams).then(ret => {
        Gesamtwert = Anzahl der Ergebnisse
        Liste.Wert = ret.Ergebnis.Elemente
      })
    }, {
      sofort: wahr
    })
    // Änderung der Seitenzahl steuern const changePage = (page) => {
      // Paging-Parameter ändern und Schnittstelle erneut aufrufen reqParams.page = page
    }
    
  }
 }

<Vorlage>
  <div Klasse="xtx-pagination">
    <a @click='changePage(false)' href="javascript:;" :class="{disabled: currentPage===1}">Vorherige Seite</a>
    <span v-if='currentPage > 3'>...</span>
    <a @click='changePage(item)' href="javascript:;" :class='{active: currentPage===item}' v-for='Element in Liste' :key='item'>{{item}}</a>
    <span v-if='currentPage < Seiten - 2'>...</span>
    <a @click='changePage(true)' href="javascript:;" :class='{disabled: currentPage===pages}'>Nächste Seite</a>
  </div>
</Vorlage>
<Skript>
importiere { berechnet, ref } von 'vue'

Standard exportieren {
  Name: "XtxPagination",
  Requisiten: {
    gesamt:
      Typ: Nummer,
      Standard: 80
    },
    Seitengröße: {
      Typ: Nummer,
      Standard: 10
    }
    //Standardmäßige anfängliche Seitenzahl// Seite: {
    // Typ: Zahl,
    // Standard: 1
    // }
  },
  setup (eigenschaften, { emittieren, attrs }) {
    // attrs stellt die von der übergeordneten Komponente übergebenen Attribute dar, aber props empfängt die Attribute nicht, was nicht reagiert // ​​Informationen zur Seitenzahl zur Halbzeit dynamisch berechnen // Anzahl der Elemente pro Seite // const pagesize = 8
    // Gesamtzahl der Seiten let pages = Math.ceil(props.total / props.pagesize)
    //Aktuelle Seitennummer// console.log(attrs.page)
    const aktuelleSeite = ref(attrs.page || 1)
    // Seitenzahlenliste dynamisch berechnen const list = computed(() => {
      // Wenn sich der von der übergeordneten Komponente übergebene Gesamtwert ändert, wird die berechnete Eigenschaft neu berechnet: Seiten = Math.ceil(props.total / props.pagesize)
      const Ergebnis = []
      // Die Gesamtseitenzahl ist kleiner oder gleich 5; größer als 5
      wenn (Seiten <= 5) {
        // Die Gesamtseitenzahl ist kleiner oder gleich 5 für (let i = 1; i <= Seiten; i++) {
          Ergebnis.push(i)
        }
      } anders {
        // Die Gesamtseitenzahl ist größer als 5
        wenn (aktuellerSeitenwert <= 2) {
          // Linker kritischer Wert für (let i = 1; i <= 5; i++) {
            Ergebnis.push(i)
          }
        } sonst wenn (currentPage.value >= Seiten - 1) {
          // Richtiger kritischer Wert für (let i = Seiten - 4; i <= Seiten; i++) {
            Ergebnis.push(i)
          }
        } anders {
          // Zwischenzustand für (let i = currentPage.value - 2; i <= currentPage.value + 2; i++) {
            Ergebnis.push(i)
          }
        }
      }
      Ergebnis zurückgeben
    })
    // Änderungen der vorherigen und nächsten Seiten steuern const changePage = (Typ) => {
      wenn (Typ === falsch) {
        // Vorherige Seite // Wenn die Seite die erste Seite ist, ist der Klickvorgang verboten, if (currentPage.value === 1) return
        wenn (aktuellerSeitenwert > 1) {
          aktuellerSeitenwert -= 1
        }
      } sonst wenn (Typ === wahr) {
        // Nächste Seite // Wenn die Seite die letzte Seite ist, ist der Klickvorgang verboten, if (currentPage.value === Seiten) return
        if (currentPage.value < Seiten) {
          aktuellerSeitenwert += 1
        }
      } anders {
        // Klicken Sie auf die Seite currentPage.value = Typ
      }
      emittieren('Seite ändern', aktuelleSeite.Wert)
    }
    return { Liste, aktuelleSeite, Seiten, Seite ändern}
  }
}
</Skript>
<style scoped lang="weniger">
.xtx-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>