[new feature] Toast: add onOpened option

docs/markdown/changelog.zh-CN.md

@@ -7,6 +7,11 @@
 - 新增`guter`属性
 - 支持`String`类型的`size`属性
 
+##### Toast
+
+- 新增`onOpened`属性
+
+
 ### [v2.0.0-beta.2](https://github.com/youzan/vant/tree/v2.0.0-beta.2)
 
 #### 无障碍访问

packages/toast/Toast.js

@@ -60,6 +60,14 @@ export default sfc({
         const action = clickable ? 'add' : 'remove';
         document.body.classList[action]('van-toast--unclickable');
       }
+    },
+
+    onAfterEnter() {
+      this.$emit('opened');
+
+      if (this.onOpened) {
+        this.onOpened();
+      }
     }
   },
 
@@ -86,7 +94,7 @@ export default sfc({
     }
 
     return (
-      <transition name="van-fade">
+      <transition name="van-fade" onAfterEnter={this.onAfterEnter}>
         <div vShow={this.value} class={[bem([style, this.position]), this.className]}>
           {Content()}
         </div>

packages/toast/en-US.md

@@ -107,5 +107,6 @@ toast2.clear();
 | 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` | - |
-| onClose | onClose callback function | `Function` | - |
+| onOpened | Callback function after opened | `Function` | - |
+| onClose | Callback function after close | `Function` | - |
 | getContainer | Return the mount node for Toast | `String | () => HTMLElement` | `body` |

packages/toast/index.js

@@ -9,6 +9,7 @@ const defaultOptions = {
   message: '',
   className: '',
   onClose: null,
+  onOpened: null,
   duration: 3000,
   position: 'middle',
   forbidClick: false,
@@ -16,11 +17,20 @@ const defaultOptions = {
   getContainer: 'body',
   overlayStyle: null
 };
-const parseOptions = message => (isObj(message) ? message : { message });
 
 let queue = [];
 let multiple = false;
-let currentOptions = { ...defaultOptions };
+let currentOptions = {
+  ...defaultOptions
+};
+
+function parseOptions(message) {
+  if (isObj(message)) {
+    return message;
+  }
+
+  return { message };
+}
 
 function createInstance() {
   /* istanbul ignore if */
@@ -39,7 +49,7 @@ function createInstance() {
 }
 
 // transform toast options to popup props
-function transformer(options) {
+function transformOptions(options) {
   options.overlay = options.mask;
   return options;
 }
@@ -76,7 +86,7 @@ function Toast(options = {}) {
     }
   };
 
-  Object.assign(toast, transformer(options));
+  Object.assign(toast, transformOptions(options));
   clearTimeout(toast.timer);
 
   if (options.duration > 0) {
@@ -88,9 +98,11 @@ function Toast(options = {}) {
   return toast;
 }
 
-const createMethod = type => options => Toast({
-  type, ...parseOptions(options)
-});
+const createMethod = type => options =>
+  Toast({
+    type,
+    ...parseOptions(options)
+  });
 
 ['loading', 'success', 'fail'].forEach(method => {
   Toast[method] = createMethod(method);

packages/toast/zh-CN.md

@@ -107,5 +107,6 @@ toast2.clear();
 | loadingType | 加载图标类型, 可选值为 `spinner` | `String` | `circular` | 1.1.3 |
 | duration | 展示时长(ms)，值为 0 时，toast 不会消失 | `Number` | `3000` | - |
 | className | 自定义类名 | `String | Array | Object` | - | 1.6.0 |
+| onOpened | 完全展示后的回调函数 | `Function` | - | 2.0.0 |
 | onClose | 关闭时的回调函数 | `Function` | - | 1.6.10 |
 | getContainer | 指定挂载的节点，可以传入选择器，<br>或一个返回节点的函数 | `String | () => HTMLElement` | `body` | 1.6.3 |

types/toast.d.ts

@@ -10,6 +10,7 @@ export type ToastOptions = {
   duration?: number;
   className?: any;
   onClose?(): void;
+  onOpened?(): void;
   forbidClick?: boolean;
   loadingType?: string;
   message?: ToastMessage;