update README.md

Author: wenlng

README.md

@@ -1,51 +1,83 @@
-# Go Captcha Vue Package
+<div align="center">
+<img width="120" style="padding-top: 50px; margin: 0;" src="http://47.104.180.148/go-captcha/gocaptcha_logo.svg?v=1"/>
+<h1 style="margin: 0; padding: 0">Go Captcha</h1>
+<p>Behavior Captcha For Vue</p>
+
+</div>
+
+<br/>
+
+> English | [中文](README_zh.md)
 
 <br/>
 
+<p> ⭐️ If it helps you, please give a star.</p>
+
+<img src="http://47.104.180.148/go-captcha/go-captcha-v2.jpg" alt="Poster">
+
+
 | Vue Version            | Go Captcha Version |
 |:-----------------------|:------------------:|
 | vue >= 2.7.14 && < 3.0 | go-captcha-vue@^1  |
 | vue >= 3.0             | go-captcha-vue@^2  |
 
 ## Install
+Greater than or equal to vue2.7.14 and less than vue3.0
 ```shell
-# Greater than or equal to vue2.7.14 and less than vue3.0
 yarn add go-captcha-vue@^1
 # or
 npm install go-captcha-vue@^1
 # or
 pnpm install go-captcha-vue@^1
+```
 
-############################################
-# Greater than vue3.0
+Greater than vue3.0
+```shell
 yarn add go-captcha-vue@^2
 # or
 npm install go-captcha-vue@^2
 # or
 pnpm install go-captcha-vue@^2
 ```
 
-Use Go Captcha
+## Use Go Captcha
 ```ts
 import "go-captcha-vue/dist/style.css"
 import GoCaptcha from "go-captcha-vue"
 
 Vue.use(GoCaptcha)
+
+// OR
+import {Click, Rotate, Slide, SlideRegion, Button} from "go-captcha-vue";
+Vue.component('gocaptcha-click', Click)
+Vue.component('gocaptcha-rotate', Rotate)
+Vue.component('gocaptcha-slide', Slide)
+Vue.component('gocaptcha-slide-region', SlideRegion)
+Vue.component('gocaptcha-button', Button)
 ```
 
-## 🖖 Click Mode Captcha
+
+## Click Mode
 ```vue
 <gocaptcha-click
   :config="{}"
   :data="{}"
   :events="{}"
+  ref="domRef"
 />
+
+<script>
+  // call methods
+  const domRef = ref(null)
+  domRef.value.clear()
+  domRef.value.refresh()
+</script>
 ```
 
-### Parameter Reference
+
 ```ts
 // config = {}
-interface ClickConfig {
+interface Config {
   width?: number;
   height?: number;
   thumbWidth?: number;
@@ -60,43 +92,46 @@ interface ClickConfig {
 }
 
 // data = {}
-interface ClickData {
+interface Data {
   image: string;
   thumb: string;
 }
 
 // events = {}
-interface ClickEvents {
+interface Events {
   click?: (x: number, y: number) => void;
   refresh?: () => void;
   close?: () => void;
   confirm?: (dots: Array<ClickDot>, reset:() => void) => boolean;
 }
 
-// component method
-interface ClickExpose {
+// export component method
+interface ExportMethods {
   reset: () => void,
   clear: () => void,
   refresh: () => void,
   close: () => void,
 }
 ```
 
-## 🖖 Slide Mode Captcha
+## Slide Mode
 ```vue
 <gocaptcha-slide
   :config="{}"
   :data="{}"
   :events="{}"
+  ref="domRef"
 />
 
-<gocaptcha-slide-region
-  :config="{}"
-  :data="{}"
-  :events="{}"
-/>
+<script>
+// call methods
+const domRef = ref(null)
+domRef.value.clear()
+domRef.value.refresh()
+</script>
 ```
-### Parameter Reference
+
+
 ```ts
 // config = {}
 interface SlideConfig {
@@ -130,14 +165,33 @@ interface SlideEvents {
   confirm?: (point: SlidePoint, reset:() => void) => boolean;
 }
 
-// component method
-interface SlideExpose {
+// export component method
+interface ExportMethods {
   reset: () => void,
   clear: () => void,
   refresh: () => void,
   close: () => void,
 }
 ```
+
+## Drag-And-Drop Mode
+```vue
+<gocaptcha-slide-region
+  :config="{}"
+  :data="{}"
+  :events="{}"
+  ref="domRef"
+/>
+
+<script>
+// call methods
+const domRef = ref(null)
+domRef.value.clear()
+domRef.value.refresh()
+</script>
+```
+
+
 ```ts
 // config = {}
 interface SlideRegionConfig {
@@ -171,29 +225,36 @@ interface SlideRegionEvents {
   confirm?: (point: SlideRegionPoint, reset:() => void) => boolean;
 }
 
-
-// component method
-interface SlideRegionExpose {
+// export component method
+interface ExportMethods {
   reset: () => void,
   clear: () => void,
   refresh: () => void,
   close: () => void,
 }
 ```
 
-## 🖖 Rotate Mode Captcha
+## Rotation Mode
 ```vue
 <gocaptcha-rotate
   :config="{}"
   :data="{}"
   :events="{}"
+  ref="domRef"
 />
+
+<script>
+// call methods
+const domRef = ref(null)
+domRef.value.clear()
+domRef.value.refresh()
+</script>
 ```
 
-### Parameter Reference
+
 ```ts
 // config = {}
-interface RotateConfig {
+interface Config {
   width?: number;
   height?: number;
   thumbWidth?: number;
@@ -207,22 +268,22 @@ interface RotateConfig {
 }
 
 // data = {}
-interface RotateData {
+interface Data {
   angle: number;
   image: string;
   thumb: string;
 }
 
 // events = {}
-interface RotateEvents {
+interface Events {
   rotate?: (angle: number) => void;
   refresh?: () => void;
   close?: () => void;
   confirm?: (angle: number, reset:() => void) => boolean;
 }
 
-// component method
-interface RotateExpose {
+// export component method
+interface ExportMethods {
   reset: () => void,
   clear: () => void,
   refresh: () => void,
@@ -231,12 +292,13 @@ interface RotateExpose {
 ```
 
 
+
 ## Button
 ```vue
 <gocaptcha-button @clickEvent="() => console.log('hello')"/>
 ```
 
-### params
+
 ```ts
 interface $Attr {
   config?: CaptchaConfig;
@@ -249,19 +311,10 @@ interface $Event {
   clickEvent?: ()=>void;     // event -> @clickEvent=""
 }
 
-export interface ButtonConfig {
+export interface CaptchaConfig {
   width?: number;
   height?: number;
   verticalPadding?: number;
   horizontalPadding?: number;
 }
-
 ```
-
-<br/>
-
-## 👍 Sponsor
-<div>
-<a href="http://gocaptcha.wencodes.com/sponsor/" target="_blank">http://gocaptcha.wencodes.com/sponsor/</a>
-</div>
-<br/>