本文介绍了如何使用Vue3、element-ui和TypeScript封装一个全局分页组件。
环境依赖
在开始之前，你需要安装以下环境：
- Vue3
- element-ui
- TypeScript
组件功能
这个分页组件提供以下功能：
- 支持自定义每页显示条数
- 支持自定义跳转到指定页码
- 支持显示总页数和总条数
- 支持自定义样式
组件实现
分页组件结构
分页组件由以下几部分组成：
<template>
<div class="pagination">
<el-pagination
:total="total"
:page-size="pageSize"
:current-page.sync="currentPage"
:layout="'total, sizes, prev, pager, next, jumper'"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
</template>
分页组件属性
分页组件提供以下属性：
| 属性名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| total | Number | 0 | 总条数 |
| pageSize | Number | 10 | 每页显示条数 |
| currentPage | Number | 1 | 当前页码 |
分页组件方法
分页组件提供以下方法：
| 方法名 | 描述 |
|---|---|
| handleSizeChange | 当每页显示条数发生变化时触发 |
| handleCurrentChange | 当页码发生变化时触发 |
分页组件样式
你可以通过修改以下样式来自定义分页组件的样式：
.pagination {
display: flex;
justify-content: center;
margin-top: 20px;
margin-bottom: 20px;
}
.el-pagination__sizes {
display: flex;
align-items: center;
margin-left: 20px;
}
.el-pagination__jump {
margin-left: 20px;
}
.el-pagination__total {
margin-right: 20px;
}
使用分页组件
使用分页组件非常简单。你只需要在你的Vue组件中引入我们封装好的Pagination组件，然后在template中使用即可。
<template>
<div class="page">
<pagination
:total="total"
:page-size="pageSize"
:current-page.sync="currentPage"
/>
</div>
</template>
<script lang="ts">
import {
defineComponent, ref } from 'vue'
import Pagination from '@/components/Pagination.vue'
export default defineComponent({
name: 'Page',
components: {
Pagination,
},
setup() {
const total = ref(1000)
const pageSize = ref(10)
const currentPage = ref(1)
return {
total,
pageSize,
currentPage,
}
},
})
</script>
总结
本文介绍了如何使用Vue3、element-ui和TypeScript封装一个全局分页组件。你可以根据自己的需求来修改我们提供的分页组件样式和属性。