doc(pagination)

demo/documentation/components/pagination/enUS/index.md

@@ -24,8 +24,8 @@ disabled
 |show-size-picker|`boolean`|`false`||
 |show-quick-jumper|`boolean`|`false`||
 |page-slot|`number`|`9`||
-|on-page-size-change|`(pageSize: number) => any`|`null`||
-|on-change|`(page: number) => any`|`null`||
+|on-page-size-change|`(pageSize: number): any`|`null`||
+|on-change|`(page: number): any`|`null`||
 
 ## Events
 |Name|Parameters|Description|

demo/documentation/components/pagination/enUS/slot.md

@@ -1,4 +1,4 @@
-# Slot
+# Page Slot
 The pagination has a property `page-slot`, try it and you will understand. It aims to solving misclicks caused by the length changing of pagination.
 ```html
 <n-pagination

demo/documentation/components/pagination/zhCN/basic.md

@@ -0,0 +1,17 @@
+# 基本用法
+```html
+<n-pagination
+  v-model="page"
+  :page-count="100"
+/>
+```
+
+```js
+export default {
+  data () {
+    return {
+      page: 2
+    }
+  }
+}
+```

demo/documentation/components/pagination/zhCN/disabled.md

@@ -0,0 +1,38 @@
+# 禁用
+```html
+<n-pagination
+  v-model="page"
+  :page-count="100"
+  show-size-picker
+  :page-size="pageSize"
+  :page-sizes="[10, 20, 30, 40]"
+  show-quick-jumper
+  :disabled="disabled"
+  @page-size-change="handlePageSizeChange"
+  :style="{ marginBottom: '12px' }"
+/>
+<n-switch v-model="disabled" />
+```
+
+```js
+export default {
+  data () {
+    return {
+      page: 2,
+      pageSize: 20,
+      disabled: true
+    }
+  },
+  methods: {
+    handlePageSizeChange (pageSize) {
+      this.pageSize = pageSize
+      this.$NMessage.info(`Page size is set to ${pageSize}`)
+    }
+  }
+}
+```
+```css
+.n-switch {
+  margin-left: 12px;
+}
+```

demo/documentation/components/pagination/zhCN/index.md

@@ -0,0 +1,34 @@
+# 分页 Pagination
+<!--single-column-->
+长数据之友。
+## 演示
+```demo
+basic
+slot
+quick-jumper
+size-picker
+disabled
+```
+## V-model
+|Prop|Event|
+|-|-|
+|page|change|
+
+## Props
+|名称|类型|默认值|介绍|
+|-|-|-|-|
+|page|`number`|`null`||
+|page-count|`number`|`null`||
+|page-size|`number`|`null`||
+|page-sizes|`Array<number>`|`[]`||
+|show-size-picker|`boolean`|`false`||
+|show-quick-jumper|`boolean`|`false`||
+|page-slot|`number`|`9`||
+|on-page-size-change|`(pageSize: number): any`|`null`||
+|on-change|`(page: number): any`|`null`||
+
+## Events
+|名称|参数|介绍|
+|-|-|-|
+|change|`(page: number)`||
+|page-size-chagne|`(pageSize: number)`||

demo/documentation/components/pagination/zhCN/quickJumper.md

@@ -0,0 +1,18 @@
+# 快速跳跃
+```html
+<n-pagination
+  v-model="page"
+  :page-count="100"
+  show-quick-jumper
+/>
+```
+
+```js
+export default {
+  data () {
+    return {
+      page: 2
+    }
+  }
+}
+```

demo/documentation/components/pagination/zhCN/sizePicker.md

@@ -0,0 +1,28 @@
+# 每页条数
+```html
+<n-pagination
+  v-model="page"
+  :page-count="100"
+  show-size-picker
+  :page-size="pageSize"
+  :page-sizes="[10, 20, 30, 40]"
+  @page-size-change="handlePageSizeChange"
+/>
+```
+
+```js
+export default {
+  data () {
+    return {
+      page: 2,
+      pageSize: 20
+    }
+  },
+  methods: {
+    handlePageSizeChange (pageSize) {
+      this.pageSize = pageSize
+      this.$NMessage.info(`Page size is set to ${pageSize}`)
+    }
+  }
+}
+```

demo/documentation/components/pagination/zhCN/slot.md

@@ -0,0 +1,34 @@
+# 页面槽位
+分页有一个属性 `page-slot`，试一下你就能理解它在做什么了。这个概念主要是为了解决由于分页长度变化导致的误点击问题。
+```html
+<n-pagination
+  v-model="page"
+  :page-count="100"
+/>
+<n-pagination
+  v-model="page"
+  :page-count="100"
+  :page-slot="8"
+/>
+<n-pagination
+  v-model="page"
+  :page-count="100"
+  :page-slot="7"
+/>
+```
+
+```js
+export default {
+  data () {
+    return {
+      page: 2
+    }
+  }
+}
+```
+
+```css
+.n-pagination {
+  margin-bottom: 12px;
+}
+```