docs: pagination 优化

src/packages/__VUE/pagination/demo.vue

@@ -1,26 +1,13 @@
 <template>
   <div class="demo">
     <h2>基础用法</h2>
-    <nut-pagination
-      v-model="currentPage"
-      :total-items="25"
-      :items-per-page="5"
-    />
+    <nut-pagination v-model="currentPage" :total-items="25" :items-per-page="5" @change="pageChange" />
     <h2>简单模式</h2>
-    <nut-pagination v-model="currentPage1" :page-count="12" mode="simple" />
+    <nut-pagination v-model="currentPage1" :page-count="12" mode="simple" @change="pageChange" />
     <h2>显示省略号</h2>
-    <nut-pagination
-      v-model="currentPage2"
-      :total-items="125"
-      :show-page-size="3"
-      force-ellipses
-    />
+    <nut-pagination v-model="currentPage2" :total-items="125" :show-page-size="3" force-ellipses @change="pageChange" />
     <h2>自定义按钮</h2>
-    <nut-pagination
-      v-model="currentPage3"
-      :total-items="500"
-      :show-page-size="5"
-    >
+    <nut-pagination v-model="currentPage3" :total-items="500" :show-page-size="5" @change="pageChange">
       <template #prev-text>
         <nut-icon name="left" size="10px" />
       </template>
@@ -46,8 +33,8 @@ export default createDemo({
       currentPage2: 1,
       currentPage3: 1
     });
-    const pageChange = (value) => {
-      console.log(value, 444);
+    const pageChange = (value: number) => {
+      console.log(value);
     };
 
     return {
@@ -57,5 +44,3 @@ export default createDemo({
   }
 });
 </script>
-
-<style lang="scss" scoped></style>

src/packages/__VUE/pagination/doc.md

@@ -1,4 +1,4 @@
-#  pagination组件
+#  Pagination 分页
 
 ### 介绍
     
@@ -12,34 +12,55 @@ import { Pagination,Icon } from '@nutui/nutui';
 const app = createApp();
 app.use(Pagination).use(Icon);
 ```    
-## 代码演示
     
 ### 基础用法
 通过 v-model 来绑定当前页码。
-``` javascript
-<nut-pagination v-model="currentPage" :total-items="25" :items-per-page="5" />
+``` html
+<nut-pagination v-model="currentPage" :total-items="25" :items-per-page="5" @change="pageChange" />
 ```  
+``` javascript
+export default {
+  setup() {
+    const state = reactive({
+      currentPage: 1,
+      currentPage1: 1,
+      currentPage2: 1,
+      currentPage3: 1
+    });
+    const pageChange = (value) => {
+      console.log(value);
+    };
+
+    return {
+      ...toRefs(state),
+      pageChange
+    };
+  }
+};
+```
 ### 简单模式
 将 mode 设置为 simple 来切换到简单模式，此时分页器不会展示具体的页码按钮。
-``` javascript
-<nut-pagination v-model="currentPage1" :page-count="12" mode="simple"/>
+``` html
+<nut-pagination v-model="currentPage1" :page-count="12" mode="simple" @change="pageChange" />
 ```  
 ### 显示省略号
 设置 force-ellipses 后会展示省略号按钮，点击后可以快速跳转。
-``` javascript
-<nut-pagination v-model="currentPage2" :total-items="125" :show-page-size="3" force-ellipses/>
+``` html
+<nut-pagination v-model="currentPage2" :total-items="125" :show-page-size="3"  @change="pageChange"  force-ellipses/>
 ``` 
 ### 自定义按钮
 设置 force-ellipses 后会展示省略号按钮，点击后可以快速跳转。
-``` javascript
-<nut-pagination v-model="currentPage3" :total-items="500" :show-page-size="5" >
-    <template #prev-text >
-        <nut-icon name="left" size="10px"/>
+``` html
+<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 #next-text >
-        <nut-icon name="right" size="10px"/>
+    <template #page="{ item }">
+        {{ item.number == 3 ? 'hot' : item.text }}
     </template>
-    <template #page="{item}" >{ {item} }</template>
 </nut-pagination>
 ``` 
 
@@ -49,28 +70,28 @@ app.use(Pagination).use(Icon);
     
 ### Props
     
-| 参数         | 说明                             | 类型   | 默认值           |
-|--------------|-------------------------------- |--------|------------------|
-| v-model      | 当前页码                         | Number | 1                |
-| mode         | 显示模式,可选值为 simple           | String | multi                |
-| prev-text    | 上一页按钮文字                     | String | 上一页               |
-| next-text    | 下一页按钮文字                     | String | 下一页               |
-| page-count   | 总页数                           | String,Number | 传入/根据页数计算 |
-| total-items   | 总记录数                       | String,Number | 0             |
-| items-per-page   | 每页记录数                      | String,Number | 10           |
-| show-page-size   | 显示的页码个数                    | String,Number | 5           |
-| force-ellipses  | 是否显示省略号                  | Boolean | false          |
+| 参数           | 说明                     | 类型          | 默认值            |
+|----------------|--------------------------|---------------|-------------------|
+| v-model        | 当前页码                 | Number        | 1                 |
+| mode           | 显示模式,可选值为 simple | String        | multi             |
+| prev-text      | 上一页按钮文字           | String        | 上一页            |
+| next-text      | 下一页按钮文字           | String        | 下一页            |
+| page-count     | 总页数                   | String,Number | 传入/根据页数计算 |
+| total-items    | 总记录数                 | String,Number | 0                 |
+| items-per-page | 每页记录数               | String,Number | 10                |
+| show-page-size | 显示的页码个数           | String,Number | 5                 |
+| force-ellipses | 是否显示省略号           | Boolean       | false             |
     
 ### Events
     
-| 事件名 | 说明           | 回调参数     |
-|--------|----------------|--------------|
-| change  | 页码改变时触发  | value |
+| 事件名 | 说明           | 回调参数 |
+|--------|----------------|----------|
+| change | 页码改变时触发 | value    |
 
 ### Slots
     
-| 名称 | 描述          | 参数     |
-|--------|----------------|--------------|
-| prev-text   | 自定义上一页按钮内容 | - |
-| next-text   | 自定义下一页按钮内容 | - |
-| page   | 自定义页码 | - |
+| 名称      | 描述                 | 参数 |
+|-----------|----------------------|------|
+| prev-text | 自定义上一页按钮内容 | -    |
+| next-text | 自定义下一页按钮内容 | -    |
+| page      | 自定义页码           | -    |