Vue3は独自のページングコンポーネントをカプセル化します

<テンプレート>
  <div class="my-pagination">
    <a href="javascript:;" :class="{ disabled: currentPage === 1 }" @click="changePage(false)">前のページ</a>
    <span v-if="currentPage > 3">...</span>
    <a
      href="javascript:;" 
      v-for="リスト内の項目"
      :key="アイテム"
      :class="{ アクティブ: currentPage === 項目 }"
      @click="ページ変更(アイテム)"
      >{{ アイテム }}</a
    >
    <span v-if="currentPage < pages - 2">...</span>
    <a href="javascript:;" :class="{ disabled: currentPage === pages }" @click="changePage(true)">次のページ</a>
  </div>
</テンプレート>
<スクリプト>
'vue-demi' から { computed, ref } をインポートします。
エクスポートデフォルト{
  名前: 'MyPagination'、
  小道具: {
    合計：
      タイプ: 数値、
      デフォルト: 80
    },
    ページサイズ: {
      タイプ: 数値、
      デフォルト: 10
    }
  },
  セットアップ(props, { 出力, attrs }) {
    // 現在のページ const currentPage = ref(attrs.currentPage)
    // ページの総数を計算する const pages = computed(() => Math.ceil(props.total / props.pagesize))
    // ページ番号表示の組み合わせ const list = computed(() => {
      定数結果 = []
      // 総ページ数が5ページ以下の場合 if (pages <= 5) {
        (i = 1 とします; i <= pages; i++) {
          結果.push(i)
        }
      } それ以外 {
        // 合計ページ数が 5 ページを超える場合 // 両端の省略記号の有無を制御し、表示されるページ番号の数は選択したページ番号の中央に配置されます if (currentPage.value <= 2) {
          (i = 1; i <= 5; i++ とします) {
            結果.push(i)
          }
        } そうでない場合 (currentPage.value >= 3 && currentPage.value <= pages.value - 2) {
          (i = currentPage.value - 2; i <= currentPage.value + 2; i++) の場合 {
            結果.push(i)
          }
        } そうでない場合 (currentPage.value > pages.value - 2) {
          (i = pages.value - 4; i <= pages.value; i++) の場合 {
            結果.push(i)
          }
        }
      }
      結果を返す
    })
    // ページ番号を変更するには前のページをクリックします const changePage = type => {
      // 前のページボタンをクリック if (type === false) {
        (currentPage.value <= 1)の場合、戻り値
        現在のページの値 -= 1
      } そうでない場合 (type === true) {
        // 次のページボタンをクリックします if (currentPage.value >= pages.value) return
        現在のページの値 += 1
      } それ以外 {
        // ページをクリック currentPage.value = type
      }
      // 現在のページ番号を親コンポーネントに渡し、このイベントで関連する操作を実行します。emit('change-page', currentPage.value)
    }
    {currentPage、pages、list、changePage} を返します。
  }
}
</スクリプト>
<style スコープ lang="less">
.my-ページネーション{
  ディスプレイ: フレックス;
  コンテンツの中央揃え: 中央;
  パディング: 30px;
  > {
    表示: インラインブロック;
    パディング: 5px 10px;
    境界線: 1px 実線 #e4e4e4;
    境界線の半径: 4px;
    右マージン: 10px;
    &:ホバー{
      色: @xtxColor;
    }
    ＆。アクティブ {
      背景: @xtxColor;
      色: #fff;
      境界線の色: @xtxColor;
    }
    ＆。無効 {
      カーソル: 許可されていません。
      不透明度: 0.4;
      &:ホバー{
        色: #333;
      }
    }
  }
  > スパン {
    右マージン: 10px;
  }
}
</スタイル>

<Xtxページネーション 
:total="合計" 
:pagesize="reqParams.pagesize" 
:現在のページ="1" 
@change-page="ページ変更" />