feat(Toast): support set default options of specfic type (#4848)

This commit is contained in:
neverland 2019-10-26 16:37:58 +08:00 committed by GitHub
parent 3784dd064e
commit 9ac81d6497
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 85 additions and 25 deletions

View File

@ -101,6 +101,24 @@ toast1.clear();
toast2.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 ## API
### Methods ### Methods
@ -113,8 +131,8 @@ toast2.clear();
| Toast.fail | `options | message` | toast instance | Show fail toast | | Toast.fail | `options | message` | toast instance | Show fail toast |
| Toast.clear | `clearAll: boolean` | `void` | Close toast | | Toast.clear | `clearAll: boolean` | `void` | Close toast |
| Toast.allowMultiple | - | `void` | Allow multlple toast at the same time | | Toast.allowMultiple | - | `void` | Allow multlple toast at the same time |
| Toast.setDefaultOptions | `options` | `void` | Set default options of all toasts | | Toast.setDefaultOptions | `type | options` | `void` | Set default options of all toasts |
| Toast.resetDefaultOptions | - | `void` | Reset default options of all toasts | | Toast.resetDefaultOptions | `type` | `void` | Reset default options of all toasts |
### Options ### Options

View File

@ -104,6 +104,24 @@ toast1.clear();
toast2.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 ## API
### 方法 ### 方法
@ -116,8 +134,8 @@ toast2.clear();
| Toast.fail | 展示失败提示 | `options | message` | toast 实例 | | Toast.fail | 展示失败提示 | `options | message` | toast 实例 |
| Toast.clear | 关闭提示 | `clearAll: boolean` | `void` | | Toast.clear | 关闭提示 | `clearAll: boolean` | `void` |
| Toast.allowMultiple | 允许同时存在多个 Toast | - | `void` | | Toast.allowMultiple | 允许同时存在多个 Toast | - | `void` |
| Toast.setDefaultOptions | 修改默认配置,对所有 Toast 生效 | `options` | `void` | | Toast.setDefaultOptions | 修改默认配置,对所有 Toast 生效<br>传入 type 可以修改指定类型的默认配置 | `type | options` | `void` |
| Toast.resetDefaultOptions | 重置默认配置,对所有 Toast 生效 | - | `void` | | Toast.resetDefaultOptions | 重置默认配置,对所有 Toast 生效<br>传入 type 可以重置指定类型的默认配置 | `type` | `void` |
### Options ### Options

View File

@ -22,6 +22,9 @@ const defaultOptions = {
closeOnClick: false closeOnClick: false
}; };
// default options of specific type
let defaultOptionsMap = {};
let queue = []; let queue = [];
let multiple = false; let multiple = false;
let currentOptions = { let currentOptions = {
@ -76,29 +79,32 @@ function Toast(options = {}) {
toast.updateZIndex(); toast.updateZIndex();
} }
options = parseOptions(options);
options = { options = {
...currentOptions, ...currentOptions,
...parseOptions(options), ...defaultOptionsMap[options.type || currentOptions.type],
clear() { ...options
toast.value = false; };
if (options.onClose) { options.clear = () => {
options.onClose(); toast.value = false;
}
if (multiple && !isServer) { if (options.onClose) {
toast.$on('closed', () => { options.onClose();
clearTimeout(toast.timer); }
queue = queue.filter(item => item !== toast);
const parent = toast.$el.parentNode; if (multiple && !isServer) {
if (parent) { toast.$on('closed', () => {
parent.removeChild(toast.$el); 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 => { Toast.setDefaultOptions = (type, options) => {
Object.assign(currentOptions, options); if (typeof type === 'string') {
defaultOptionsMap[type] = options;
} else {
Object.assign(currentOptions, type);
}
}; };
Toast.resetDefaultOptions = () => { Toast.resetDefaultOptions = type => {
currentOptions = { ...defaultOptions }; if (typeof type === 'string') {
defaultOptionsMap[type] = null;
} else {
currentOptions = { ...defaultOptions };
defaultOptionsMap = {};
}
}; };
Toast.allowMultiple = (value = true) => { Toast.allowMultiple = (value = true) => {

View File

@ -121,6 +121,15 @@ test('set default options', () => {
expect(Toast().className).toEqual(''); 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', () => { test('toast duration 0', () => {
Toast.allowMultiple(); Toast.allowMultiple();
const toast = Toast({ const toast = Toast({