Vue3.0 でページング コンポーネントを手動でカプセル化する方法

<!-- page はページングを初期化するときに表示されるデフォルトのページを示します -->
    <XtxPagination @change-page='changePage' :pagesize='reqParams.pageSize' :total='total' :page='1' />
    // '@/api/product.js' からインターフェース import {findCommentListByGoods } を呼び出す
 エクスポートデフォルト{
  設定（）{
  // スクリーニング条件の準備 const reqParams = reactive({
      // 現在のページ番号 page: 1,
      //ページあたりのエントリ数pageSize: 10,
      // 写真があるか hasPicture: null,
      // フィルター条件タグ: null、
      // ソートフィールド sortField: null
    })
    // パラメータの変更を監視する watch(reqParams, () => {
   findCommentListByGoods(goods.value.id, reqParams).then(ret => {
        合計値 = 戻り値の数
        リストの値 = ret.result.items
      })
    }, {
      即時: 真
    })
    // ページ番号の変更を制御する const changePage = (page) => {
      // ページングパラメータを変更し、インターフェースを再度呼び出します reqParams.page = page
    }
    
  }
 }

<テンプレート>
  <div class="xtx-pagination">
    <a @click='changePage(false)' href="javascript:;" :class="{disabled: currentPage===1}">前のページ</a>
    <span v-if='currentPage > 3'>...</span>
    <a @click='changePage(item)' href="javascript:;" :class='{active: currentPage===item}' v-for='リスト内のアイテム' :key='item'>{{item}}</a>
    <span v-if='currentPage < pages - 2'>...</span>
    <a @click='changePage(true)' href="javascript:;" :class='{disabled: currentPage===pages}'>次のページ</a>
  </div>
</テンプレート>
<スクリプト>
'vue' から { computed, ref } をインポートします。

エクスポートデフォルト{
  名前: 'XtxPagination'、
  小道具: {
    合計：
      タイプ: 数値、
      デフォルト: 80
    },
    ページサイズ: {
      タイプ: 数値、
      デフォルト: 10
    }
    //デフォルトの初期ページ番号// page: {
    // 型: 数値、
    // デフォルト: 1
    // }
  },
  セットアップ (props, { 出力, attrs }) {
    // attrs は親コンポーネントから渡された属性を表しますが、props は属性を受け取らないため、応答しません // ​​中間ページ番号情報を動的に計算します // ページあたりの項目数 // const pagesize = 8
    // ページの総数 let pages = Math.ceil(props.total / props.pagesize)
    //現在のページ番号// console.log(attrs.page)
    const currentPage = ref(attrs.page || 1)
    // ページ番号リストを動的に計算する const list = computed(() => {
      // 親コンポーネントから渡された合計値が変わると、計算プロパティは再計算されます pages = Math.ceil(props.total / props.pagesize)
      定数結果 = []
      // 合計ページ数は 5 以下、5 より大きい
      ページ数 <= 5 の場合
        // 合計ページ数は 5 以下です for (let i = 1; i <= pages; i++) {
          結果.push(i)
        }
      } それ以外 {
        // 合計ページ数が 5 より大きい
        (現在のページの値 <= 2) の場合 {
          // 左臨界値 for (let i = 1; i <= 5; i++) {
            結果.push(i)
          }
        } そうでない場合 (currentPage.value >= pages - 1) {
          // 右臨界値 for (let i = pages - 4; i <= pages; i++) {
            結果.push(i)
          }
        } それ以外 {
          // 中間状態 for (let i = currentPage.value - 2; i <= currentPage.value + 2; i++) {
            結果.push(i)
          }
        }
      }
      結果を返す
    })
    // 前のページと次のページの変更を制御する const changePage = (type) => {
      （型 === false）の場合{
        // 前のページ // 最初のページの場合はクリック操作は禁止 if (currentPage.value === 1) return
        (現在のページの値 > 1) の場合 {
          現在のページの値 -= 1
        }
      } そうでない場合 (type === true) {
        // 次のページ // 最後のページの場合、クリック操作は禁止されます if (currentPage.value === pages) return
        (currentPage.value < ページ) の場合 {
          現在のページの値 += 1
        }
      } それ以外 {
        // ページをクリック currentPage.value = type
      }
      出力('change-page', currentPage.value)
    }
    { リスト、現在のページ、ページ、変更ページ } を返します。
  }
}
</スクリプト>
<style スコープ lang="less">
.xtxページネーション{
  ディスプレイ: フレックス;
  コンテンツの中央揃え: 中央;
  パディング: 30px;
  > {
    表示: インラインブロック;
    パディング: 5px 10px;
    境界線: 1px 実線 #e4e4e4;
    境界線の半径: 4px;
    右マージン: 10px;
    &:ホバー{
      色: @xtxColor;
    }
    ＆。アクティブ {
      背景: @xtxColor;
      色: #fff;
      境界線の色: @xtxColor;
    }
    ＆。無効 {
      カーソル: 許可されていません。
      不透明度: 0.4;
      &:ホバー{
        色: #333;
      }
    }
  }
  > スパン {
    右マージン: 10px;
  }
}
</スタイル>