Appearance
PenkFooter 分页栏 #
专门用于后台管理系统，因为分页都是固定的一些配置以及样式，所以可以封装，主要获取数据交互即可。
PenkFooter 通过传递 JSON 对象，配置其头部各个搜索项。
基础用法 #
在按照文档配置，进行了 Penk-Ui 依赖包的安装后，就可以直接使用。
js
// xxx.vue template
<PenkFooter
:total="paginationData.total"
v-model:pageNum="paginationData.pageNum"
v-model:pageSize="paginationData.pageSize"
@change="getList"
></PenkFooter>
1
2
3
4
5
6
7
2
3
4
5
6
7
配置 #
ts
// xxx.vue script
<script setup lang="ts">
import { reactive } from "vue";
// 分页数据
const paginationData = reactive({
total: 100,
pageNum: 1,
pageSize: 10,
});
</script>
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
获取分页栏数据 #
由于是使用了 v-model，所以直接使用即可...
ts
import { ref } from "vue";
function getList() {
console.log(paginationData);
// ...
}
1
2
3
4
5
2
3
4
5
PenkFooter TypeScript 接口声明 #
ts
// 暴露props
interface props {
// 总条目数
total: number;
// 当前页
pageNum: number;
// 页数
pageSize: number;
}
const props = defineProps<props>();
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
PenkFooter API #
PenkFooter 属性 #
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| total | 必填，总条目数 | number | --- |
| pageNum | 必填，当前页 | number | --- |
| pageSize | 必填，页数 | number | --- |
PenkFooter 对外暴露的属性或者方法 #
| 属性名 | 说明 | 类型 |
|---|---|---|
| change | 当 el-pagination 触发了 handleSizeChange，handleCurrentChange 就会触发 PenkFooter 的 change 事件 | (data: props) => void |