VUE3（二十三）自定義分頁組件Pagination

剛開始使用vue3寫博客的時候，其相關配套的UI庫並沒有正式發布，但是我還要用，所以這里我自定義了一個分頁組件：最后效果如下圖所示：

上代碼：

Pagination.vue

<template>
  <!-- 自定義分頁組件 -->
  <div class="page-bar">
    <ul>
      <li class="first">
        <!-- <span>共{{dataNum}}條記錄 第 {{cur}} / {{all}} 頁</span> -->
        <span>共{{ dataNum }}條記錄 </span>
      </li>
      <li v-if="cur > 1" class="prev-next">
        <!-- 點擊上一頁 -->
        <a v-on:click="cur--, pageClick()"> prev </a>
      </li>
      <li v-if="cur == 1" class="prev-next">
        <!-- 點擊第一頁時顯示 -->
        <a class="banclick"> prev </a>
      </li>
      <li
        class="li_a"
        v-for="index in indexs"
        v-bind:class="{ active: cur == index }"
      >
        <!-- 頁碼 -->
        <a v-on:click="btnClick(index)"> {{ index }}</a>
      </li>
      <li v-if="cur != all" class="prev-next">
        <!-- 點擊下一頁 -->
        <a v-on:click="cur++, pageClick()"> next </a>
      </li>
      <li v-if="cur == all" class="prev-next">
        <!-- 點擊最后一頁時顯示 -->
        <a class="banclick"> next </a>
      </li>
 
      <li class="last_li">
        <!-- 共有多少頁 -->
        跳至<input type="text" class="page-input" @blur.prevent="changePage()" v-model="jumpPage">頁
      </li>
 
      <li class="last_li">
        <!-- 共有多少頁 -->
        <span
          >共<i>{{ all }}</i
          >頁</span
        >
      </li>
    </ul>
  </div>
</template>
<script>
// 引入js文件
import Pagination from "/@/assets/js/components/pc/Pagination";
// 使用js對象
export default {
  ...Pagination,
};
</script>
<style lang="scss" scoped>
@import "../../assets/css/components/pc/Pagination.scss";
</style>

Pagination.ts

import {
  PropType,
  ref,
  watch,
  computed,
  reactive,
  toRefs,
  inject,
  provide,
  onMounted
} from "vue";
// 引入公共js文件
import utils from "/@/assets/js/public/function";
// 定義返回的類型
interface dataRef {
  btnClick: (val:number) => void;
  pageClick: () => void;
  changePage: () => void;
}
export default {
  name: "Pagination",
  props: {
    // 總頁數
    'dataAll': {
      type: Number,
      default: 100,
      required: true
    },
    // 當前頁數
    'dataCur': {
      type: Number,
      default: 1,
      required: true
    },
    // 頁面條數
    'datanum': {
      type: Number,
      default: 7
    },
    // 數據總量
    'dataDatanum': {
      type: Number,
      default: 456
    },
  },
  // VUE3語法 setup函數
  // setup官方文檔:https://www.vue3js.cn/docs/zh/guide/composition-api-setup.html#參數
  setup(props: any, content:any): dataRef 
  {
    /**
     * @name: 聲明data
     * @author: camellia
     * @email: [e-mail]
     * @date: 2021-01-10 
     */
    const data:any = reactive({
      all: props.dataAll, //總頁數
      cur: Number(props.dataCur),//當前頁碼
      num: props.datanum, //一頁顯示的數量  奇數
      dataNum: props.dataDatanum,//數據的數量
      jumpPage:0,// 跳轉頁碼
      indexs:computed(()=>{
        var left = 1;
        var right = data.all;
        var ar = [];
        if (data.all >= data.num) 
        {
          if (data.cur > 3 && data.cur < data.all - 2) 
          {
            left = data.cur - (data.num - 1) / 2;
            right = Number(data.cur) + Number((data.num - 1) / 2);
          } 
          else 
          {
            if (data.cur <= 3) 
            {
              left = 1
              right = data.num
            } 
            else 
            {
              right = data.all
              left = data.all - (data.num - 1);
            }
          }
        }
        while (left <= right) 
        {
          ar.push(left)
          left++
        }
        return ar
      })
    });
 
    /**
     * @name: 頁碼點擊事件
     * @author: camellia
     * @email: [e-mail]
     * @date: 2021-01-11 
     */
    const btnClick = (val:Number) => { 
      if (val != data.cur) 
      {
        data.cur = val
        content.emit('changePage', data.cur);
      }
    };
    /**
     * @name: 點擊上一頁下一頁
     * @author: camellia
     * @email: [e-mail]
     * @date: 2021-01-11 
     */
    const pageClick = () => {
      //父組件通過changePage方法來接受當前的頁碼
      //這里是點擊下一頁執行函數
      content.emit('changePage', data.cur)
    }
 
    /**
     * @name: 跳至 xxx 頁
     * @author: camellia
     * @email: [e-mail]
     * @date: 2021-01-13 
     */
    const changePage = () => {
      if (data.jumpPage > data.all || data.jumpPage < 1 || isNaN(data.jumpPage) )
      {
        utils.alertMsg(2000,"參數錯誤！");return;
      }
      content.emit('changePage', Number(data.jumpPage))
    }
 
    /**
     * @name: 將data綁定值dataRef
     * @author: camellia
     * @email: [e-mail]
     * @date: 2021-01-10 
     */
    const dataRef = toRefs(data);
    return {
      btnClick,
      pageClick,
      changePage,
      ...dataRef
    }
  },
}

Pagination.scss

 .page-bar {
   text-align: center;
   width: 100%;
   height: 36px;
   margin: 0 auto;
   position: relative;
 }
 
 .page-bar ul {
   min-width: 800px;
   display: block;
   overflow: hidden;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
   }
 
.page-bar li {
   display: block;
    border: 1px solid #ddd;
   width: 36px;
   height: 36px;
   border-radius: 4px;
   list-style: none;
   overflow: hidden;
   position: relative;
   float: left;
   margin-left: 8px;
}
.page-bar .first{
   display: block;
  //  width: 170px;
   width: 100px;
   height: 36px;
   font-size: 14px;
   line-height: 36px;
   text-align: center;
}
.page-bar .last_li{
   width: 100px;
   height: 36px;
   border: 1px solid #ddd;
   line-height: 34px;
}
.page-bar .last_li span{
    width: 100%;
   height: 100%;
   line-height: 36px;
   text-align: center;
   float: left;
}
.page-bar li:first-child {
   margin-left: 0px
}
 
.page-bar a {
   width: 34px;
   height: 34px;
   text-decoration: none;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
   /*margin-left: -1px;*/
   line-height:  34px;
   color: #333;
   cursor: pointer
}
 
.page-bar .li_a a:hover {
   background-color: #eee;
   border: 1px solid #40A9FF;
   color: #40A9FF;
}
 
.page-bar a.banclick {
   cursor: not-allowed;
}
 
.page-bar .active a {
   color: #fff;
   cursor: default;
   background-color: #1890FF;
   border-color: #1890FF;
}
 
.page-bar i {
   font-style: normal;
   color: #d44950;
   margin: 0px 4px;
   font-size: 14px;
}
.page-bar .prev-next{
  width:50px;
}
 
.page-bar input{  
   background:none;  
   outline:none;  
  border:1px solid #ccc;
  
}
.page-bar .page-input{
  width: 30px;
  height: 25px;
  padding-left: 6px;
}

父組件調用：

Index.ts

import {
    PropType,
    ref,
    watch,
    reactive,
    toRefs,
    getCurrentInstance,
    provide,
    inject,
    onBeforeMount,// 在組件掛載之前執行的函數
    onMounted,
    onBeforeUpdate,// 在組件修改之前執行的函數
    onUpdated,
    onBeforeUnmount,// 在組件卸載之前執行的函數
    onUnmounted,
    nextTick
} from "vue";
// 引入axios鈎子
import axios from "/@/hooks/axios.ts";
// 引入路由
import { useRouter, useRoute } from "vue-router";
 
// 引入各個自定義組件(懶加載)
// const HelloWorld = () => import("/@/components/HelloWorld.v
import Pagination from "/@/components/pc/Pagination.vue";
 
export default {
    name: "index",
    components: {
        Pagination,
    },
    // VUE3 語法 第一個執行的鈎子函數
    // setup官方文檔 ：https://www.vue3js.cn/docs/zh/guide/composition-api-setup.html#參數
    // setup(props: any, content: any) {
    setup(props: any, content: any) {
        const router = useRouter();
        const route = useRoute()
        //獲取上下文實例，ctx=vue2的this
        // const { ctx,proxy } = getCurrentInstance();
        /**
         * @name: 聲明data
         * @author: camellia
         * @email: [e-mail]
         * @date: 2021-01-10 
         */
        const data = reactive({
            // 文章列表
            articleList:[],
            // 數據頁數
            articlePage:0,
            // 當前頁
            currentPage: route.query.page ? route.query.page : 1,
            // 分頁顯示頁碼數
            dataNum:7,
            // 查詢條件
            search:'search',
            // 數據總條數
            dataDatanum:'',
        });
 
        /**
         * @name: 分頁子組件傳遞值方法
         * @author: camellia
         * @email: [e-mail]
         * @date: 2021-01-11 
         * @param:  param   Number  子組件傳遞來的頁碼
         */
        const changePage = (param: number) => {
            data.currentPage = param;
            getData('page');
            router.push(
            { 
                path: '/pc/index', 
                query: { 
                    page: JSON.stringify(data.currentPage) 
                }
            });
        }
        // 初始調用
        getData();
 
        /**
         * @name: 將data綁定值dataRef
         * @author: camellia
         * @email: [e-mail]
         * @date: 2021-01-10 
         */
        const dataRef = toRefs(data);
        return {
            getData,
            changePage,
            ...dataRef
        }
    },//*/
};

代碼中有注釋，我這里就不做贅述了。

當然，你還可以擴展其他功能。

有好的建議，請在下方輸入你的評論。
歡迎訪問個人博客
https://guanchao.site

歡迎訪問小程序：