suppot API

Author: hunterliu1003

README.md

@@ -77,41 +77,25 @@ Yarn:
 yarn add vue-final-modal
 ```
 
-## Basic usage
-
-### Register
+## Registeration
 
-#### Vue
-
-- **Register in SFC**
+### Vue
 
 ```js
-import { VueFinalModal } from 'vue-final-modal'
+import VueFinalModal from 'vue-final-modal'
 
-export default {
-  components: {
-    VueFinalModal
-  }
-}
+Vue.use(VueFinalModal)
 ```
 
-- **Install globally**
-
-```js
-import { VueFinalModal } from 'vue-final-modal'
-
-Vue.component('VueFinalModal', VueFinalModal)
-```
-
-#### Nuxt
+### Nuxt
 
 - **Write a plugin `vue-final-modal.js`**
 
 ```js
 // plugins/vue-final-modal.js
-import VueFinalModal from 'vue-final-modal/lib/VueFinalModal.vue'
+import VueFinalModal from 'vue-final-modal/lib'
 
-Vue.component('VueFinalModal', VueFinalModal)
+Vue.use(VueFinalModal)
 ```
 
 - **Add plugin into `nuxt.config.js`**
@@ -123,7 +107,7 @@ export default {
 }
 ```
 
-#### CDN
+### CDN
 
 - **jsDelivr**
 
@@ -137,21 +121,114 @@ export default {
 <script src="https://unpkg.com/vue-final-modal"></script>
 ```
 
-### **Add component to template**
+## Basic usage
+
+### **Click button to open modal**
 
 ```html
 <vue-final-modal v-model="showModal">
   Modal Content Here
 </vue-final-modal>
+
+<button @click="showModal = true">Launch</button>
 ```
 
-### **Create a button**
+### **Open modal by `name`**
 
 ```html
-<button @click="showModal = true">Launch</button>
+<vue-final-modal v-model="showModal" name="example">
+  Modal Content Here
+</vue-final-modal>
+```
+
+```js
+this.$vfm.show('example')
+```
+
+## **API**
+
+Plugin API can be called within any component through `this.$vfm`
+
+### `$vfm.openedModals`
+
+- Type: `Array`
+
+A stack array store the opened modal's vue component instance.
+
+You can use:
+1. `$vfm.openedModals[0]` to get the first opened modal instance.
+2. `$vfm.openedModals.length` to get how many modals is opened.
+
+### `$vfm.modals`
+
+- Type: `Array`
+
+All modal instances include show and hide.
+
+### `$vfm.show(name)`
+
+- Type: `Function`
+- Arguments:
+  - name: `String` - Name of the modal
+- Example:
+
+```html
+<template>
+    <vue-final-modal v-model="show" name="example">Vue Final Modal is awesome</vue-final-modal>
+</template>
+
+<script>
+export default {
+    name: 'MyComponent',
+    data: () => ({
+      show: false
+    }),
+    mounted () {
+        this.$modal.show('example')
+    }
+}
+</script>
 ```
 
-### **Default props**
+### `$vfm.hide(name)`
+
+- Type: `Function`
+- Arguments:
+  - name: `String` - Name of the modal
+- Example:
+
+```html
+<template>
+    <vue-final-modal v-model="show" name="example">Vue Final Modal is awesome</vue-final-modal>
+</template>
+
+<script>
+export default {
+    name: 'MyComponent',
+    data: () => ({
+      show: true
+    }),
+    mounted () {
+        this.$modal.hide('example')
+    }
+}
+</script>
+```
+
+### `$vfm.hideAll()`
+
+hide all modals.
+
+### `$vfm.toggle(name, show)`
+
+- Type: `Function`
+- Arguments:
+  - name: `String` - Name of the modal
+  - show: `Boolean` - Show modal or not
+
+toggle modal by name.
+
+## **Props**
 
 ```js
 const CLASS_TYPES = [String, Object, Array]