xtf-pagination

组件说明

xtf-pagination 是分页导航组件，适用于列表和数据表的页码切换；支持页码列表、跳页与每页条数切换。 核心能力以当前 xtf-pagination.vue 源码为准。

---

基础用法

1. 基础用法

最小配置下即可完成常见业务交互：

<template>
  <xtf-pagination v-model="value" :total="100" @change="onEvent" />
</template>

<script>
export default {
  data() {
    return { value: '' }
  },
  methods: {
    onEvent(payload) {
      console.log('组件事件', payload)
    }
  }
}
</script>

2. 核心交互

监听组件事件并维护页面状态：

<template>
  <xtf-pagination
    v-model="value"
    show-page-list
    show-jumper
    :total="200"
    :page-size="10"
    @page-size-change="onEvent"
  />
</template>

<script>
export default {
  data() {
    return { value: '' }
  },
  methods: {
    onEvent(payload) {
      console.log('组件事件', payload)
    }
  }
}
</script>

3. 进阶配置

组合布局、样式或插槽能力：

<template>
  <xtf-pagination v-model="value" variant="outline" show-page-list :total="80" :page-size="10" />
</template>

<script>
export default {
  data() {
    return { value: '' }
  },
  methods: {
    onEvent(payload) {
      console.log('组件事件', payload)
    }
  }
}
</script>

---

全部属性

属性	类型	默认值	作用描述	适用范围
modelValue	[String, Number]	undefined	控制组件的 modelValue 行为。	按业务需要设置。
value	[String, Number]	undefined	控制组件的 value 行为。	按业务需要设置。
current	[String, Number]	1	控制组件的 current 行为。	按业务需要设置。
pageSize	[String, Number]	10	控制组件的 pageSize 行为。	按业务需要设置。
total	[String, Number]	0	控制组件的 total 行为。	按业务需要设置。
pageCount	[String, Number]	0	控制组件的 pageCount 行为。	按业务需要设置。
pageSizeOptions	Array	函数返回值	控制组件的 pageSizeOptions 行为。	按业务需要设置。
mode	String	'full'	控制组件的 mode 行为。	按业务需要设置。
prevText	String	''	控制组件的 prevText 行为。	按业务需要设置。
nextText	String	''	控制组件的 nextText 行为。	按业务需要设置。
showJumper	Boolean	false	控制组件的 showJumper 行为。	按业务需要设置。
showPageList	Boolean	false	控制组件的 showPageList 行为。	按业务需要设置。
showTotal	Boolean	true	控制组件的 showTotal 行为。	按业务需要设置。
pageButtonCount	[String, Number]	5	控制组件的 pageButtonCount 行为。	按业务需要设置。
pageStyle	[String, Object]	''	控制组件的 pageStyle 行为。	按业务需要设置。
activePageStyle	[String, Object]	''	控制组件的 activePageStyle 行为。	按业务需要设置。
pageShape	String	'rounded'	控制组件的 pageShape 行为。	按业务需要设置。
variant	String	'default'	控制组件的 variant 行为。	按业务需要设置。
disabled	Boolean	false	控制组件的 disabled 行为。	按业务需要设置。
customClass	String	''	控制组件的 customClass 行为。	按业务需要设置。
customStyle	[String, Object]	''	控制组件的 customStyle 行为。	按业务需要设置。

---

事件

事件名称	触发时机	回调参数	参数说明
input	对应交互或状态变化时触发。	payload	参数形状以源码 $emit('input', ...) 为准。
update:modelValue	页码变化时触发。	page	新的当前页码，供 v-model 同步。
update:value	对应交互或状态变化时触发。	payload	参数形状以源码 $emit('update:value', ...) 为准。
update:current	对应交互或状态变化时触发。	payload	参数形状以源码 $emit('update:current', ...) 为准。
update:pageSize	对应交互或状态变化时触发。	payload	参数形状以源码 $emit('update:pageSize', ...) 为准。
change	对应交互或状态变化时触发。	payload	参数形状以源码 $emit('change', ...) 为准。
page-size-change	对应交互或状态变化时触发。	payload	参数形状以源码 $emit('page-size-change', ...) 为准。

事件使用示例

<template>
  <xtf-pagination :total="100" @input="onEvent" />
</template>
<script>
export default {
  methods: {
    onEvent(payload) {
      console.log('收到事件', payload)
    }
  }
}
</script>

---

方法

无公开实例方法，通过双向绑定和 change 事件控制。

---

主题说明

• var(--xtf-color-surface) 参与组件的颜色、背景、边框或动效呈现。
• var(--xtf-card-border) 参与组件的颜色、背景、边框或动效呈现。
• var(--xtf-color-fill) 参与组件的颜色、背景、边框或动效呈现。
• var(--xtf-color-text) 参与组件的颜色、背景、边框或动效呈现。
• var(--xtf-color-primary) 参与组件的颜色、背景、边框或动效呈现。
• var(--xtf-color-text-secondary) 参与组件的颜色、背景、边框或动效呈现。
• var(--xtf-radius-md) 参与组件的颜色、背景、边框或动效呈现。
• 视觉变体的可选值以 variant、theme、layout 等属性在源码中的分支为准。

如需全局调整主题，请在 xtf-config-provider 或主题配置中覆盖上述 CSS 变量。