docs(Pagination): use composition api

src/pagination/README.md

@@ -19,11 +19,12 @@ app.use(Pagination);
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
+  setup() {
-    return {
+    const currentPage = ref(1);
-      currentPage: 1,
+    return { currentPage };
-    };
   },
 };
 ```

src/pagination/README.zh-CN.md

@@ -21,11 +21,12 @@ app.use(Pagination);
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
+  setup() {
-    return {
+    const currentPage = ref(1);
-      currentPage: 1,
+    return { currentPage };
-    };
   },
 };
 ```

src/pagination/demo/index.vue

@@ -48,31 +48,40 @@
   </demo-block>
 </template>
 
-<script>
+<script lang="ts">
-export default {
+import { reactive, toRefs } from 'vue';
-  i18n: {
+import { useTranslate } from '@demo/use-translate';
-    'zh-CN': {
-      title2: '简单模式',
-      title3: '显示省略号',
-      title4: '自定义按钮',
-      prevText: '上一页',
-      nextText: '下一页',
-    },
-    'en-US': {
-      title2: 'Simple Mode',
-      title3: 'Show ellipses',
-      title4: 'Custom Button',
-      prevText: 'Prev',
-      nextText: 'Next',
-    },
-  },
 
-  data() {
+const i18n = {
-    return {
+  'zh-CN': {
+    title2: '简单模式',
+    title3: '显示省略号',
+    title4: '自定义按钮',
+    prevText: '上一页',
+    nextText: '下一页',
+  },
+  'en-US': {
+    title2: 'Simple Mode',
+    title3: 'Show ellipses',
+    title4: 'Custom Button',
+    prevText: 'Prev',
+    nextText: 'Next',
+  },
+};
+
+export default {
+  setup() {
+    const t = useTranslate(i18n);
+    const state = reactive({
       currentPage1: 1,
       currentPage2: 1,
       currentPage3: 1,
       currentPage4: 1,
+    });
+
+    return {
+      ...toRefs(state),
+      t,
     };
   },
 };