Vue + TS封装全局分页组件-蒲公英云

Vue + TS封装全局分页组件

在Vue3项目中，我们常常会用到分页组件。为了方便复用和统一样式，我们可以封装一个全局的分页组件。

实现思路

定义一个Pagination组件，包含分页逻辑和样式。
在全局注册Pagination组件。
在需要使用分页组件的地方引入并使用。

代码实现

Pagination组件

<template>
  <div class="pagination">
    <button :disabled="page === 1" @click="pageChange(page - 1)">上一页</button>
    <span v-for="index in totalPage" :key="index" :class="{active: index === page}" @click="pageChange(index)">{
    {
    index}}</span>
    <button :disabled="page === totalPage" @click="pageChange(page + 1)">下一页</button>
  </div>
</template>
<script lang="ts">
import {
     defineComponent } from 'vue'
export default defineComponent({
  name: 'Pagination',
  props: {
    total: {
      type: Number,
      required: true
    },
    pageSize: {
      type: Number,
      default: 10
    },
    currentPage: {
      type: Number,
      default: 1
    }
  },
  computed: {
    totalPage() {
      return Math.ceil(this.total / this.pageSize)
    },
    page() {
      return this.currentPage
    }
  },
  methods: {
    pageChange(page: number) {
      if (page < 1 || page > this.totalPage) {
        return
      }
      this.$emit('page-change', page)
    }
  }
})
</script>
<style scoped>
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  button, span {
    margin: 0 5px;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
  }
  button:disabled, span.disabled {
    color: #999;
    cursor: not-allowed;
  }
  span.active {
    background-color: #1890ff;
    color: #fff;
  }
}
</style>

全局注册

import {
     createApp } from 'vue'
import Pagination from './components/Pagination.vue'
const app = createApp(App)
app.component('Pagination', Pagination)
app.mount('#app')

使用

<template>
  <div>
    <table>
      <!-- 表格内容 -->
    </table>
    <Pagination :total="total" :current-page="currentPage" @page-change="handlePageChange" />
  </div>
</template>
<script lang="ts">
import {
     defineComponent, ref } from 'vue'
export default defineComponent({
  name: 'MyComponent',
  setup() {
    const total = ref(50)
    const currentPage = ref(1)
    const handlePageChange = (page: number) => {
      currentPage.value = page
      // 发起请求获取指定页数据
    }
    return {
      total,
      currentPage,
      handlePageChange
    }
  }
})
</script>