From 48dc0a071b0a77d9174d062f371de58bcbd2a845 Mon Sep 17 00:00:00 2001
From: "Xing.Wu" <329106954@qq.com>
Date: Fri, 25 Jun 2021 16:08:46 +0800
Subject: [PATCH] feat(docs): Pagination code for composition (#2329)

Co-authored-by: xing.wu <wuxing@bjca.org.cn>
---
 website/docs/en-US/pagination.md | 42 ++++++++++++++++++++++++++++++++
 website/docs/es/pagination.md    | 42 ++++++++++++++++++++++++++++++++
 website/docs/fr-FR/pagination.md | 42 ++++++++++++++++++++++++++++++++
 website/docs/jp/pagination.md    | 42 ++++++++++++++++++++++++++++++++
 website/docs/zh-CN/pagination.md | 42 ++++++++++++++++++++++++++++++++
 5 files changed, 210 insertions(+)

diff --git a/website/docs/en-US/pagination.md b/website/docs/en-US/pagination.md
index caa1e3d544..4f780c5821 100644
--- a/website/docs/en-US/pagination.md
+++ b/website/docs/en-US/pagination.md
@@ -137,6 +137,33 @@ Add more modules based on your scenario.
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const handleSizeChange = (val) => {
+        console.log(`${val} items per page`);
+      };
+      const handleCurrentChange = (val) => {
+        console.log(`current page: ${val}`);
+      };
+
+      return {
+        currentPage1: ref(5),
+        currentPage2: ref(5),
+        currentPage3: ref(5),
+        currentPage4: ref(4),
+        handleSizeChange,
+        handleCurrentChange,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -165,6 +192,21 @@ When there is only one page, hide the pagination by setting the `hide-on-single-
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      return {
+        value: ref(false),
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
diff --git a/website/docs/es/pagination.md b/website/docs/es/pagination.md
index cb6ced26c7..2e4a4336bd 100644
--- a/website/docs/es/pagination.md
+++ b/website/docs/es/pagination.md
@@ -124,6 +124,33 @@ Agrega más módulos basados en su escenario.
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const handleSizeChange = (val) => {
+        console.log(`${val} items per page`);
+      };
+      const handleCurrentChange = (val) => {
+        console.log(`current page: ${val}`);
+      };
+
+      return {
+        currentPage1: ref(5),
+        currentPage2: ref(5),
+        currentPage3: ref(5),
+        currentPage4: ref(4),
+        handleSizeChange,
+        handleCurrentChange,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 
 :::
@@ -152,6 +179,21 @@ Cuando sólo hay una página, oculte la paginación configurando el atributo `hi
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      return {
+        value: ref(false),
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
diff --git a/website/docs/fr-FR/pagination.md b/website/docs/fr-FR/pagination.md
index 85a2feae57..e23a343aac 100644
--- a/website/docs/fr-FR/pagination.md
+++ b/website/docs/fr-FR/pagination.md
@@ -141,6 +141,33 @@ Vous pouvez ajouter plus de modules suivant vos besoins.
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const handleSizeChange = (val) => {
+        console.log(`${val} items per page`);
+      };
+      const handleCurrentChange = (val) => {
+        console.log(`current page: ${val}`);
+      };
+
+      return {
+        currentPage1: ref(5),
+        currentPage2: ref(5),
+        currentPage3: ref(5),
+        currentPage4: ref(4),
+        handleSizeChange,
+        handleCurrentChange,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -169,6 +196,21 @@ Lorsqu'il n'y a qu'une seule page, il est possible de cacher la pagination avec
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      return {
+        value: ref(false),
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
diff --git a/website/docs/jp/pagination.md b/website/docs/jp/pagination.md
index 426cccae76..86d02b0b0b 100644
--- a/website/docs/jp/pagination.md
+++ b/website/docs/jp/pagination.md
@@ -137,6 +137,33 @@
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const handleSizeChange = (val) => {
+        console.log(`${val} items per page`);
+      };
+      const handleCurrentChange = (val) => {
+        console.log(`current page: ${val}`);
+      };
+
+      return {
+        currentPage1: ref(5),
+        currentPage2: ref(5),
+        currentPage3: ref(5),
+        currentPage4: ref(4),
+        handleSizeChange,
+        handleCurrentChange,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -165,6 +192,21 @@
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      return {
+        value: ref(false),
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
diff --git a/website/docs/zh-CN/pagination.md b/website/docs/zh-CN/pagination.md
index 3d89d89557..77c6af0d20 100644
--- a/website/docs/zh-CN/pagination.md
+++ b/website/docs/zh-CN/pagination.md
@@ -137,6 +137,33 @@
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const handleSizeChange = (val) => {
+        console.log(`每页 ${val} 条`);
+      };
+      const handleCurrentChange = (val) => {
+        console.log(`当前页: ${val}`);
+      };
+
+      return {
+        currentPage1: ref(5),
+        currentPage2: ref(5),
+        currentPage3: ref(5),
+        currentPage4: ref(4),
+        handleSizeChange,
+        handleCurrentChange,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -165,6 +192,21 @@
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      return {
+        value: ref(false),
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::