介绍
本文档主要用于描述 ShadcnPagination 组件的一些特性和用法。
用法
查看代码
vue
<template>
<ShadcnPagination total="100"/>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const defaultValue = ref(1)
</script>每页大小 (page-size)
查看代码
vue
<template>
<ShadcnPagination total="100" page-size="20"/>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const defaultValue = ref(1)
</script>上下页文本 (prev-text, next-text)
查看代码
vue
<template>
<ShadcnPagination total="100" prev-text="P" next-text="N"/>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const defaultValue = ref(1)
</script>最大页数 (max-show-page)
查看代码
vue
<template>
<ShadcnPagination total="100" max-show-page="8"/>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const defaultValue = ref(1)
</script>显示总数 (show-total)
查看代码
vue
<template>
<ShadcnPagination total="100" show-total/>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const defaultValue = ref(1)
</script>页数选择器 (show-sizer)
查看代码
vue
<template>
<ShadcnPagination v-model="defaultValue" total="100" show-sizer/>
<ShadcnPagination v-model="defaultValue" total="100" show-sizer :sizer-options="[5, 10, 20]"/>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const defaultValue = ref(1)
</script>