From 8ea9c571a05be24556f0802d306628033f5b67f2 Mon Sep 17 00:00:00 2001
From: Terry Zeng <terry5@foxmail.com>
Date: Sun, 28 Aug 2022 15:52:16 +0800
Subject: [PATCH] =?UTF-8?q?docs:=20=E6=9B=B4=E6=96=B0=20README.md=20?=
 =?UTF-8?q?=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md     | 60 ++++++++++++++++++++++++---------------------------
 tsconfig.json |  3 ++-
 2 files changed, 30 insertions(+), 33 deletions(-)

diff --git a/README.md b/README.md
index 3f06fa5..b2bc0ce 100644
--- a/README.md
+++ b/README.md
@@ -1,51 +1,51 @@
-# [v-page](https://terryz.github.io/vue/#/page) &middot; [![circle ci](https://circleci.com/gh/TerryZ/v-page.svg?style=svg)](https://circleci.com/gh/TerryZ/v-page) [![code coverage](https://codecov.io/gh/TerryZ/v-page/branch/master/graph/badge.svg)](https://codecov.io/gh/TerryZ/v-page) [![npm version](https://img.shields.io/npm/v/v-page.svg)](https://www.npmjs.com/package/v-page) [![license](https://img.shields.io/badge/license-MIT-brightgreen.svg)](https://mit-license.org/) [![npm download](https://img.shields.io/npm/dy/v-page.svg)](https://www.npmjs.com/package/v-page) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
+# [v-page](https://terryz.github.io/vue/#/page) &middot; [![CircleCI](https://dl.circleci.com/status-badge/img/gh/TerryZ/v-page/tree/master.svg?style=svg)](https://dl.circleci.com/status-badge/redirect/gh/TerryZ/v-page/tree/master) [![code coverage](https://codecov.io/gh/TerryZ/v-page/branch/master/graph/badge.svg)](https://codecov.io/gh/TerryZ/v-page) [![npm version](https://img.shields.io/npm/v/v-page.svg)](https://www.npmjs.com/package/v-page) [![license](https://img.shields.io/badge/license-MIT-brightgreen.svg)](https://mit-license.org/) [![npm download](https://img.shields.io/npm/dy/v-page.svg)](https://www.npmjs.com/package/v-page) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
 
-A simple pagination bar, including size Menu, i18n support, based on **Vue2**
+A simple pagination bar for vue3, including size Menu, i18n support
 
 <img src="https://terryz.github.io/image/v-page/v-page.png" alt="v-page" height="54px">
 
+If you are using vue `2.x` version, please use [v-page 2.x](https://github.com/TerryZ/v-page/tree/dev-vue-2) version instead
+
 ## Examples and Documentation
 
-Live Examples on [CodePen](https://codepen.io/terry05/pen/yjZYLR), more exmaples and documentation please visit below sites
+Examples and documentation please visit below sites
 
-- [English site](https://terryz.github.io/vue/#/page)
-- [国内站点](https://terryz.gitee.io/vue/#/page)
+- [github pages for english](https://terryz.github.io/vue/#/page)
 
 The jQuery version: [bPage](https://github.com/TerryZ/bPage)
 
 ## Installation
 
-<a href="https://nodei.co/npm/v-page/"><img src="https://nodei.co/npm/v-page.png"></a>
+[![https://nodei.co/npm/v-page.png?downloads=true&downloadRank=true&stars=true](https://nodei.co/npm/v-page.png?downloads=true&downloadRank=true&stars=true)](https://www.npmjs.com/package/v-page)
 
 ```sh
 npm i -S v-page
 ```
 
-Include and install plugin in your `main.js` file.
+Include and install plugin in your `main.js` file
 
 ```js
 // add component in global scope as plugin
-import Vue from 'vue'
+import { createApp } from 'vue'
+import App from './app.vue'
 import Page from 'v-page'
-Vue.use(Page, {
-  global config options
+
+const app = createApp(App)
+app.use(Page, {
+  // globally config options
 })
+app.mount('#app')
 ```
 
 You also can use `v-page` in local component
 
 ```vue
 <template>
-  <v-page></v-page>
+  <page />
 </template>
 
-<script>
+<script setup>
 import { Page } from 'v-page'
-export default {
-  components: {
-    'v-page': Page
-  }
-}
 </script>
 ```
 
@@ -54,24 +54,20 @@ export default {
 ```vue
 <template>
   <v-page
+    v-model="pageNumber"
     :total-row="totalRow"
-    @page-change="pageChange"
-  ></v-page>
+    @change="pageChange"
+  />
 </template>
 
-<script>
-export default {
-  data () {
-    return {
-      totalRow: 100 // required option
-    }
-  },
-  methods: {
-    // receive page info change callback
-    pageChange (pInfo) {
-      console.log(pInfo) // { pageNumber: 1, pageSize: 10 }
-    }
-  }
+<script setup>
+import { ref } from 'vue'
+
+const pageNumber = ref(3)
+const totalRow = ref(100)
+// respond for pagination change
+function pageChange (data) {
+  console.log(pInfo) // { pageNumber: 1, pageSize: 10 }
 }
 </script>
 ```
diff --git a/tsconfig.json b/tsconfig.json
index 3a569cf..50c9b8f 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -3,6 +3,7 @@
     "target": "es5",
     "strict": true,
     "module": "es2015",
-    "moduleResolution": "node"
+    "moduleResolution": "node",
+    "allowJs": true
   }
 }
\ No newline at end of file