import{e as a,o as t,G as n}from"./vendor.js";const p={class:"markdown-body"},l=n(`

Pagination \u5206\u9875

\u4ECB\u7ECD

\u5F53\u6570\u636E\u91CF\u8F83\u591A\u65F6\uFF0C\u91C7\u7528\u5206\u9875\u7684\u5F62\u5F0F\u5206\u9694\u957F\u5217\u8868\u3002

\u5B89\u88C5

import { createApp } from 'vue';
import { Pagination,Icon } from '@nutui/nutui';

const app = createApp();
app.use(Pagination).use(Icon);

\u57FA\u7840\u7528\u6CD5

\u901A\u8FC7 v-model \u6765\u7ED1\u5B9A\u5F53\u524D\u9875\u7801\u3002

<nut-pagination v-model="currentPage" :total-items="25" :items-per-page="5" @change="pageChange" />

export default {
  setup() {
    const state = reactive({
      currentPage: 1,
      currentPage1: 1,
      currentPage2: 1,
      currentPage3: 1
    });
    const pageChange = (value) => {
      console.log(value);
    };

    return {
      ...toRefs(state),
      pageChange
    };
  }
};

\u7B80\u5355\u6A21\u5F0F

\b\u5C06 mode \u8BBE\u7F6E\u4E3A simple \u6765\u5207\u6362\u5230\u7B80\u5355\u6A21\u5F0F\uFF0C\u6B64\u65F6\u5206\u9875\u5668\u4E0D\u4F1A\u5C55\u793A\u5177\u4F53\u7684\u9875\u7801\u6309\u94AE\u3002

<nut-pagination v-model="currentPage1" :page-count="12" mode="simple" @change="pageChange" />

\u663E\u793A\u7701\u7565\u53F7

\u8BBE\u7F6E force-ellipses \u540E\u4F1A\u5C55\u793A\u7701\u7565\u53F7\u6309\u94AE\uFF0C\u70B9\u51FB\u540E\u53EF\u4EE5\u5FEB\u901F\u8DF3\u8F6C\u3002

<nut-pagination v-model="currentPage2" :total-items="125" :show-page-size="3"  @change="pageChange"  force-ellipses/>

\u81EA\u5B9A\u4E49\u6309\u94AE

\u8BBE\u7F6E force-ellipses \u540E\u4F1A\u5C55\u793A\u7701\u7565\u53F7\u6309\u94AE\uFF0C\u70B9\u51FB\u540E\u53EF\u4EE5\u5FEB\u901F\u8DF3\u8F6C\u3002

<nut-pagination v-model="currentPage3" :total-items="500"  @change="pageChange"  :show-page-size="5">
    <template #prev-text>
        <nut-icon name="left" size="10px" />
    </template>
    <template #next-text>
        <nut-icon name="right" size="10px" />
    </template>
    <template #page="{ item }">
        {{ item.number == 3 ? 'hot' : item.text }}
    </template>
</nut-pagination>

API

Props

\u53C2\u6570	\u8BF4\u660E	\u7C7B\u578B	\u9ED8\u8BA4\u503C
v-model	\u5F53\u524D\u9875\u7801	Number	1
mode	\u663E\u793A\u6A21\u5F0F,\u53EF\u9009\u503C\u4E3A simple	String	multi
prev-text	\u4E0A\u4E00\u9875\u6309\u94AE\u6587\u5B57	String	\u4E0A\u4E00\u9875
next-text	\u4E0B\u4E00\u9875\u6309\u94AE\u6587\u5B57	String	\u4E0B\u4E00\u9875
page-count	\u603B\u9875\u6570	String,Number	\u4F20\u5165/\u6839\u636E\u9875\u6570\u8BA1\u7B97
total-items	\u603B\u8BB0\u5F55\u6570	String,Number	0
items-per-page	\u6BCF\u9875\u8BB0\u5F55\u6570	String,Number	10
show-page-size	\u663E\u793A\u7684\u9875\u7801\u4E2A\u6570	String,Number	5
force-ellipses	\u662F\u5426\u663E\u793A\u7701\u7565\u53F7	Boolean	false

Events

\u4E8B\u4EF6\u540D	\u8BF4\u660E	\u56DE\u8C03\u53C2\u6570
change	\u9875\u7801\u6539\u53D8\u65F6\u89E6\u53D1	value

Slots

\u540D\u79F0	\u63CF\u8FF0	\u53C2\u6570
prev-text	\u81EA\u5B9A\u4E49\u4E0A\u4E00\u9875\u6309\u94AE\u5185\u5BB9	-
next-text	\u81EA\u5B9A\u4E49\u4E0B\u4E00\u9875\u6309\u94AE\u5185\u5BB9	-
page	\u81EA\u5B9A\u4E49\u9875\u7801	-

`,25),e=[l],g={setup(r,{expose:s}){return s({frontmatter:{}}),(c,d)=>(t(),a("div",p,e))}};export{g as default};