update README.md

Author: wenlng

README.md

@@ -1,9 +1,20 @@
-# Go Captcha Angular 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 Angular</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">
 
-<br/>
 
 ## Install
 ```shell
@@ -51,18 +62,28 @@ export class AppModule { }
 
 <br/>
 
-## 🖖 Click Mode Captcha
+## Click Mode
 ```angular2html
-import GoCaptcha from 'go-captcha-angular';
-
-<GoCaptcha.Click
+<go-captcha-click
   [config]="{}"
   [data]="{}"
   [events]="{}"
+  #domRef
 />
+
+<script>
+  class Demo {
+    // call methods
+    @ViewChild('domRef') domRef;
+    test(){
+      this.domRef?.clear()
+      this.domRef?.refresh()
+    }
+  }
+</script>
 ```
 
-### Parameter Reference
+
 ```ts
 // config = {}
 interface ClickConfig {
@@ -90,35 +111,40 @@ interface ClickEvents {
   click?: (x: number, y: number) => void;
   refresh?: () => void;
   close?: () => void;
-  confirm?: (dots: Array<ClickDot>, reset: ()=>void) => boolean;
+  confirm?: (dots: Array<ClickDot>, reset:() => void) => boolean;
 }
 
-// component method
-interface PublicMethods {
+// export component method
+interface ExportMethods {
   reset: () => void,
   clear: () => void,
   refresh: () => void,
   close: () => void,
 }
 ```
 
-## 🖖 Slide Mode Captcha
+## Slide Mode
 ```angular2html
-import GoCaptcha from 'go-captcha-angular';
-
-<GoCaptcha.Slide
+<go-captcha-slide
   [config]="{}"
   [data]="{}"
   [events]="{}"
+  #domRef
 />
 
-<GoCaptcha.SlideRegion
-  [config]="{}"
-  [data]="{}"
-  [events]="{}"
-/>
+<script>
+  class Demo {
+    // call methods
+    @ViewChild('domRef') domRef;
+    test(){
+      this.domRef?.clear()
+      this.domRef?.refresh()
+    }
+  }
+</script>
 ```
-### Parameter Reference
+
+
 ```ts
 // config = {}
 interface SlideConfig {
@@ -149,18 +175,39 @@ interface SlideEvents {
   move?: (x: number, y: number) => void;
   refresh?: () => void;
   close?: () => void;
-  confirm?: (point: SlidePoint, reset: () => void) => boolean;
+  confirm?: (point: SlidePoint, reset:() => void) => boolean;
 }
 
-// component method
-interface PublicMethods {
+// export component method
+interface ExportMethods {
   reset: () => void,
   clear: () => void,
   refresh: () => void,
   close: () => void,
 }
 ```
 
+## Drag-And-Drop Mode
+```angular2html
+<go-captcha-slide-region
+  [config]="{}"
+  [data]="{}"
+  [events]="{}"
+  #domRef
+/>
+
+<script>
+  class Demo {
+    // call methods
+    @ViewChild('domRef') domRef;
+    test(){
+      this.domRef?.clear()
+      this.domRef?.refresh()
+    }
+  }
+</script>
+```
+
 ```ts
 // config = {}
 interface SlideRegionConfig {
@@ -191,30 +238,40 @@ interface SlideRegionEvents {
   move?: (x: number, y: number) => void;
   refresh?: () => void;
   close?: () => void;
-  confirm?: (point: SlideRegionPoint, reset: ()=>void) => boolean;
+  confirm?: (point: SlideRegionPoint, reset:() => void) => boolean;
 }
 
-// component method
-interface PublicMethods {
+// export component method
+interface ExportMethods {
   reset: () => void,
   clear: () => void,
   refresh: () => void,
   close: () => void,
 }
 ```
 
-## 🖖 Rotate Mode Captcha
+## Rotation Mode
 ```angular2html
-import GoCaptcha from 'go-captcha-angular';
-
-<GoCaptcha.Rotate
+<go-captcha-rotate
   [config]="{}"
   [data]="{}"
   [events]="{}"
+  #domRef
 />
+
+<script>
+  class Demo {
+    // call methods
+    @ViewChild('domRef') domRef;
+    test(){
+      this.domRef?.clear()
+      this.domRef?.refresh()
+    }
+  }
+</script>
 ```
 
-### Parameter Reference
+
 ```ts
 // config = {}
 interface RotateConfig {
@@ -242,11 +299,11 @@ interface RotateEvents {
   rotate?: (angle: number) => void;
   refresh?: () => void;
   close?: () => void;
-  confirm?: (angle: number, reset: ()=>void) => boolean;
+  confirm?: (angle: number, reset:() => void) => boolean;
 }
 
-// component method
-interface PublicMethods {
+// export component method
+interface ExportMethods {
   reset: () => void,
   clear: () => void,
   refresh: () => void,
@@ -255,14 +312,12 @@ interface PublicMethods {
 ```
 
 
-## 🖖 Button
+## Button
 ```jsx
-import GoCaptcha from 'go-captcha-angular';
-
-<GoCaptcha.Button />
+<go-captcha-button />
 ```
 
-### Parameter Reference
+
 ```ts
 interface _ {
   config?: ButtonConfig;
@@ -279,11 +334,3 @@ export interface ButtonConfig {
   horizontalPadding?: number;
 }
 ```
-
-<br/>
-
-## 👍 Sponsor
-<div>
-<a href="http://gocaptcha.wencodes.com/sponsor/" target="_blank">http://gocaptcha.wencodes.com/sponsor/</a>
-</div>
-<br/>