mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-08-10 14:39:45 +08:00
feat(Toast): support set default options of specfic type (#4848)
This commit is contained in:
parent
3784dd064e
commit
9ac81d6497
@ -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
|
||||||
|
|
||||||
|
@ -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
|
||||||
|
|
||||||
|
@ -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) => {
|
||||||
|
@ -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({
|
||||||
|
Loading…
x
Reference in New Issue
Block a user