diff --git a/src/toast/README.md b/src/toast/README.md index ac1b482a9..f3acf7f59 100644 --- a/src/toast/README.md +++ b/src/toast/README.md @@ -101,6 +101,24 @@ toast1.clear(); toast2.clear(); ``` +### Set Default Options + +The Toast default configuration can be globally modified with the `Toast.setDefaultOptions` function. + +```js +// Set the duration of all Toast to 2000 ms +Toast.setDefaultOptions({ duration: 2000 }); + +// Set all loading types Toast to background unclickable +Toast.setDefaultOptions('loading', { forbidClick: true }); + +// Reset default options of all Toast +Toast.resetDefaultOptions(); + +// Reset default options of all loading Toast +Toast.resetDefaultOptions('loading'); +``` + ## API ### Methods @@ -113,8 +131,8 @@ toast2.clear(); | 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 | +| Toast.setDefaultOptions | `type | options` | `void` | Set default options of all toasts | +| Toast.resetDefaultOptions | `type` | `void` | Reset default options of all toasts | ### Options diff --git a/src/toast/README.zh-CN.md b/src/toast/README.zh-CN.md index 0ef0d1ead..867ba13d5 100644 --- a/src/toast/README.zh-CN.md +++ b/src/toast/README.zh-CN.md @@ -104,6 +104,24 @@ toast1.clear(); toast2.clear(); ``` +### 修改默认配置 + +通过`Toast.setDefaultOptions`函数可以全局修改 Toast 的默认配置 + +```js +// 将所有 Toast 的展示时长设置为 2000 毫秒 +Toast.setDefaultOptions({ duration: 2000 }); + +// 将所有 loading Toast 设置为背景不可点击 (2.2.10 版本开始支持) +Toast.setDefaultOptions('loading', { forbidClick: true }); + +// 重置所有 Toast 的默认配置 +Toast.resetDefaultOptions(); + +// 重置 loading Toast 的默认配置 (2.2.10 版本开始支持) +Toast.resetDefaultOptions('loading'); +``` + ## API ### 方法 @@ -116,8 +134,8 @@ toast2.clear(); | Toast.fail | 展示失败提示 | `options | message` | toast 实例 | | Toast.clear | 关闭提示 | `clearAll: boolean` | `void` | | Toast.allowMultiple | 允许同时存在多个 Toast | - | `void` | -| Toast.setDefaultOptions | 修改默认配置,对所有 Toast 生效 | `options` | `void` | -| Toast.resetDefaultOptions | 重置默认配置,对所有 Toast 生效 | - | `void` | +| Toast.setDefaultOptions | 修改默认配置,对所有 Toast 生效。
传入 type 可以修改指定类型的默认配置 | `type | options` | `void` | +| Toast.resetDefaultOptions | 重置默认配置,对所有 Toast 生效。
传入 type 可以重置指定类型的默认配置 | `type` | `void` | ### Options diff --git a/src/toast/index.js b/src/toast/index.js index 18950dd6b..c12d60639 100644 --- a/src/toast/index.js +++ b/src/toast/index.js @@ -22,6 +22,9 @@ const defaultOptions = { closeOnClick: false }; +// default options of specific type +let defaultOptionsMap = {}; + let queue = []; let multiple = false; let currentOptions = { @@ -76,29 +79,32 @@ function Toast(options = {}) { toast.updateZIndex(); } + options = parseOptions(options); options = { ...currentOptions, - ...parseOptions(options), - clear() { - toast.value = false; + ...defaultOptionsMap[options.type || currentOptions.type], + ...options + }; - if (options.onClose) { - options.onClose(); - } + options.clear = () => { + toast.value = false; - if (multiple && !isServer) { - toast.$on('closed', () => { - clearTimeout(toast.timer); - queue = queue.filter(item => item !== toast); + if (options.onClose) { + options.onClose(); + } - const parent = toast.$el.parentNode; - if (parent) { - parent.removeChild(toast.$el); - } + if (multiple && !isServer) { + toast.$on('closed', () => { + clearTimeout(toast.timer); + queue = queue.filter(item => item !== toast); - toast.$destroy(); - }); - } + const parent = toast.$el.parentNode; + if (parent) { + parent.removeChild(toast.$el); + } + + toast.$destroy(); + }); } }; @@ -139,12 +145,21 @@ Toast.clear = all => { } }; -Toast.setDefaultOptions = options => { - Object.assign(currentOptions, options); +Toast.setDefaultOptions = (type, options) => { + if (typeof type === 'string') { + defaultOptionsMap[type] = options; + } else { + Object.assign(currentOptions, type); + } }; -Toast.resetDefaultOptions = () => { - currentOptions = { ...defaultOptions }; +Toast.resetDefaultOptions = type => { + if (typeof type === 'string') { + defaultOptionsMap[type] = null; + } else { + currentOptions = { ...defaultOptions }; + defaultOptionsMap = {}; + } }; Toast.allowMultiple = (value = true) => { diff --git a/src/toast/test/index.spec.js b/src/toast/test/index.spec.js index c469720ec..62164d354 100644 --- a/src/toast/test/index.spec.js +++ b/src/toast/test/index.spec.js @@ -121,6 +121,15 @@ test('set default options', () => { expect(Toast().className).toEqual(''); }); +test('set default options by type', () => { + const className = 'my-toast'; + Toast.setDefaultOptions('loading', { className }); + expect(Toast.loading().className).toEqual(className); + expect(Toast.success().className).toEqual(''); + Toast.resetDefaultOptions(); + expect(Toast.loading().className).toEqual(''); +}); + test('toast duration 0', () => { Toast.allowMultiple(); const toast = Toast({