本文介紹了如何使用Vue3、element-ui和TypeScript封裝一個(gè)全局分頁(yè)組件。
環(huán)境依賴
在開(kāi)始之前，你需要安裝以下環(huán)境：
- Vue3
- element-ui
- TypeScript
組件功能
這個(gè)分頁(yè)組件提供以下功能：
- 支持自定義每頁(yè)顯示條數(shù)
- 支持自定義跳轉(zhuǎn)到指定頁(yè)碼
- 支持顯示總頁(yè)數(shù)和總條數(shù)
- 支持自定義樣式
組件實(shí)現(xiàn)
分頁(yè)組件結(jié)構(gòu)
分頁(yè)組件由以下幾部分組成：
<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>
分頁(yè)組件屬性
分頁(yè)組件提供以下屬性：
| 屬性名 | 類型 | 默認(rèn)值 | 描述 |
|---|---|---|---|
| total | Number | 0 | 總條數(shù) |
| pageSize | Number | 10 | 每頁(yè)顯示條數(shù) |
| currentPage | Number | 1 | 當(dāng)前頁(yè)碼 |
分頁(yè)組件方法
分頁(yè)組件提供以下方法：
| 方法名 | 描述 |
|---|---|
| handleSizeChange | 當(dāng)每頁(yè)顯示條數(shù)發(fā)生變化時(shí)觸發(fā) |
| handleCurrentChange | 當(dāng)頁(yè)碼發(fā)生變化時(shí)觸發(fā) |
分頁(yè)組件樣式
你可以通過(guò)修改以下樣式來(lái)自定義分頁(yè)組件的樣式：
.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;
}
使用分頁(yè)組件
使用分頁(yè)組件非常簡(jiǎn)單。你只需要在你的Vue組件中引入我們封裝好的Pagination組件，然后在template中使用即可。文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-530354.html
<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>
總結(jié)
本文介紹了如何使用Vue3、element-ui和TypeScript封裝一個(gè)全局分頁(yè)組件。你可以根據(jù)自己的需求來(lái)修改我們提供的分頁(yè)組件樣式和屬性。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-530354.html
到了這里，關(guān)于Vue3+element-ui + TS封裝全局分頁(yè)組件的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
