vue-pithy-pagination

vue-pithy-pagination 重构

[email protected] 发现在vue3中使用不了，因为是2年前编写的组件库，使用webpack进行打包构建，可能一些构建上的语法不兼容vue3，这次重构就用了rollup进行打包构建，进测试，兼容vue2和vue3，且包体积减少了。

[email protected]

下载

 npm i [email protected] -D

使用

 <template>
   <div id="app">
    <vue-pithy-pagination
      :allCount="allCount"
      :pageCount="pageCount"
      @getCurrentPage="getCurrentPage"
      @choosePage="choosePage"
    />
  </div>
</template>
<script>
import VuePithyPagination from 'vue-pithy-pagination'

import 'vue-pithy-pagination/dist/vue-pithy-pagination.css'
export default {
  name: "App",
  data() {
    return {
      allCount: 101,
      pageCount: 10,
    };
  },
    components:{VuePithyPagination},

  methods: {
    getCurrentPage(currentPage) {
      console.log(currentPage);
    },
    choosePage(pageCount) {
      this.pageCount = pageCount;
    },
  },
}
</script>

重构版本

vue-pithy-pagination@latest

下载

 npm i vue-pithy-pagination@latest -D

使用

 //vue2
<template>
    <div id="app">
    <vue-pithy-pagination
      :allCount="allCount"
      :pageCount="pageCount"
      @getCurrentPage="getCurrentPage"
      @choosePage="choosePage"
    />
  </div>
</template>
<script>
import VuePithyCalendar from 'vue-pithy-calendar/dist/vue2/esm'

export default {
  name: "App",
  data() {
    return {
      allCount: 101,
      pageCount: 10,
    };
  },
components:{VuePithyPagination},
 
  methods: {
    getCurrentPage(currentPage) {
      console.log(currentPage);
    },
    choosePage(pageCount) {
      this.pageCount = pageCount;
    },
  },
}
</script>

 //vue3
<template>
    <div>
        <vue-pithy-pagination
      :allCount="allCount"
      :pageCount="pageCount"
      @getCurrentPage="getCurrentPage"
      @choosePage="choosePage"
    />
    </div>
</template>
<script setup lang="ts">
import {  ref } from 'vue'

import VuePithyCalendar from 'vue-pithy-calendar'
const allCount = ref(101);
const pageCount = ref(10)
const getCurrentPage = (currentPage: number) => {
  console.log(currentPage);
}
const choosePage = (count: number) => {
  pageCount.value = count
}
</script>

方法	是否必写	说明	返回结果
getCurrentPage	是	获取点击的当前页	Number
choosePage	是	获取改变的页码	Number

参数	是否必传	说明	类型
allCount	是	总条数	Number
pageCount	是	每页条数	Number

效果：