[Doc] rename component README file (#3662)

2019-06-27 14:22:40 +08:00
parent a56f96c246
commit ddb24e6762
119 changed files with 4 additions and 3 deletions
@@ -0,0 +1,127 @@
+# Toast
+
+### Install
+
+```javascript
+import { Toast } from 'vant';
+
+Vue.use(Toast);
+```
+
+## Usage
+
+### Text
+
+```javascript
+Toast('Some messages');
+```
+
+### Loading
+
+```javascript
+Toast.loading({
+  mask: true,
+  message: 'Loading...'
+});
+```
+
+### Success/Fail
+
+```javascript
+Toast.success('Success');
+Toast.fail('Fail');
+```
+
+### Custom Icon
+
+```js
+Toast({
+  message: 'Custom Icon',
+  icon: 'like-o'
+});
+
+Toast({
+  message: 'Custom Image',
+  icon: 'https://img.yzcdn.cn/vant/logo.png'
+});
+```
+
+### Advanced Usage
+
+```javascript
+const toast = Toast.loading({
+  duration: 0,       // continuous display toast
+  forbidClick: true, // forbid click background
+  loadingType: 'spinner',
+  message: '3 seconds'
+});
+
+let second = 3;
+const timer = setInterval(() => {
+  second--;
+  if (second) {
+    toast.message = `${second} seconds`;
+  } else {
+    clearInterval(timer);
+    Toast.clear();
+  }
+}, 1000);
+```
+
+### $toast Method
+
+After import the Toast component, the $toast method is automatically mounted on Vue.prototype, making it easy to call within a vue component.
+
+```js
+export default {
+  mounted() {
+    this.$toast('Some messages');
+  }
+}
+```
+
+### Singleton
+
+Toast use singleton mode by default, if you need to pop multiple Toast at the same time, you can refer to the following example
+
+```js
+Toast.allowMultiple();
+
+const toast1 = Toast('First Toast');
+const toast2 = Toast.success('Second Toast');
+
+toast1.clear();
+toast2.clear();
+```
+
+## API
+
+### Methods
+
+| Methods | Attribute | Return value | Description |
+|------|------|------|------|
+| Toast | `options | message` | toast instance | Show toast |
+| Toast.loading | `options | message` | toast instance | Show loading toast |
+| Toast.success | `options | message` | toast instance | Show success toast |
+| Toast.fail | `options | message` | toast instance | Show fail toast |
+| Toast.clear | `clearAll: boolean` | `void` | Close toast |
+| Toast.allowMultiple | - | `void` | Allow multlple toast at the same time |
+| Toast.setDefaultOptions | `options` | `void` | Set default options of all toasts |
+| Toast.resetDefaultOptions | - | `void` | Reset default options of all toasts |
+
+### Options
+
+| Attribute | Description | Type | Default |
+|------|------|------|------|
+| type | Can be set to `loading` `success` `fail` `html` | `String` | `text` |
+| position | Can be set to `top` `middle` `bottom` | `String` | `middle` |
+| message | Message | `String` | `''` |
+| icon | Custom icon | `String` | - |
+| mask | Whether to show mask | `Boolean` | `false` |
+| forbidClick | Whether to forbid click background | `Boolean` | `false` |
+| loadingType | Loading icon type, can be set to `spinner` | `String` | `circular` |
+| duration | Toast duration(ms), won't disappear if value is 0 | `Number` | `3000` |
+| className | Custom className | `String | Array | Object` | - |
+| onOpened | Callback function after opened | `Function` | - |
+| onClose | Callback function after close | `Function` | - |
+| getContainer | Return the mount node for Toast | `String | () => HTMLElement` | `body` |