diff --git a/docs/markdown/changelog.zh-CN.md b/docs/markdown/changelog.zh-CN.md index a9c1a36c8..a03436806 100644 --- a/docs/markdown/changelog.zh-CN.md +++ b/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) #### 无障碍访问 diff --git a/packages/toast/Toast.js b/packages/toast/Toast.js index 6a107e52f..70821240d 100644 --- a/packages/toast/Toast.js +++ b/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 ( - +
{Content()}
diff --git a/packages/toast/en-US.md b/packages/toast/en-US.md index 18f1e53f8..e44cd90cf 100644 --- a/packages/toast/en-US.md +++ b/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` | diff --git a/packages/toast/index.js b/packages/toast/index.js index 60098cae5..2d8ba49bc 100644 --- a/packages/toast/index.js +++ b/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); diff --git a/packages/toast/zh-CN.md b/packages/toast/zh-CN.md index dd31dbe4e..89e846392 100644 --- a/packages/toast/zh-CN.md +++ b/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 | 指定挂载的节点,可以传入选择器,
或一个返回节点的函数 | `String | () => HTMLElement` | `body` | 1.6.3 | diff --git a/types/toast.d.ts b/types/toast.d.ts index e7f994a32..0e669dcaf 100644 --- a/types/toast.d.ts +++ b/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;