[Improvement] Toast: 新增默认配置设置 (#229)

* toast 增强

* 补充文档 && 补充示例

* reset 参数说明
This commit is contained in:
Yao 2018-05-08 22:44:38 +08:00 committed by GitHub
parent 8b15d95153
commit 5189d37578
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 76 additions and 7 deletions

View File

@ -4,10 +4,11 @@ Page({
data: {},
showToast() {
Toast({
message: 'toast的内容',
Toast.setDefaultOptions({
selector: '#zan-toast-test'
})
});
Toast('toast的内容');
},
showIconToast() {

View File

@ -42,6 +42,8 @@ Toast.loading({
| Toast | `options`, `timeout` | - | 展示提示 |
| Toast.loading | `options` | - | 展示加载提示 |
| Toast.clear | - | - | 关闭提示 |
| Toast.setDefaultOptions | `options` 格式同 Toast 函数可以传入的参数, `type` 可选 global/page, 分别指定对整个小程序生效/对当前页面生效 | - | 修改默认配置,对所有 Toast 生效 |
| Toast.resetDefaultOptions | `type` 可选 global/page | - | 重置默认配置,对所有 Toast 生效 |
#### options 具体参数如下
| 参数 | 说明 | 类型 | 默认值 | 可选值 |

View File

@ -1,15 +1,47 @@
const TOAST_CONFIG_KEY = 'zanui.__zanToastPageConfig';
let timeoutData = {
timeoutId: 0,
toastCtx: null
};
function Toast(options = {}, pageCtx) {
let globalToastUserConfig = {};
// 获取页面上下文
function getPageCtx(pageCtx) {
let ctx = pageCtx;
if (!ctx) {
const pages = getCurrentPages();
ctx = pages[pages.length - 1];
}
const toastCtx = ctx.selectComponent(options.selector);
return ctx;
}
// 获取当前页面的 toast 配置数据
function getPageToastConfig(pageCtx) {
const zanuiData = pageCtx.data.zanui || {};
return zanuiData.__zanToastPageConfig || {};
}
// Toast 显示函数
function Toast(optionsOrMsg, pageCtx) {
// 参数格式化处理
// 如果是文字,默认为 message
let options = optionsOrMsg || {};
if (typeof optionsOrMsg === 'string') {
options = { message: optionsOrMsg };
}
let ctx = getPageCtx(pageCtx);
const pageToastUserSetting = getPageToastConfig(ctx);
const parsedOptions = {
...globalToastUserConfig,
...pageToastUserSetting,
...options
};
const toastCtx = ctx.selectComponent(parsedOptions.selector);
if (!toastCtx) {
console.error('无法找到对应的toast组件请于页面中注册并在 wxml 中声明 toast 自定义组件');
@ -21,13 +53,13 @@ function Toast(options = {}, pageCtx) {
}
toastCtx.show({
...options,
...parsedOptions,
show: true
});
const timeoutId = setTimeout(() => {
toastCtx.clear();
}, options.timeout || 3000);
}, parsedOptions.timeout || 3000);
timeoutData = {
timeoutId,
@ -35,6 +67,40 @@ function Toast(options = {}, pageCtx) {
};
}
// 设置 toast 基础属性
Toast.setDefaultOptions = function (options = {}, type = 'page') {
const parsedDefaultOptions = {
selector: options.selector || '',
type: options.type || '',
icon: options.icon || '',
image: options.image || '',
timeout: options.timeout || 3000
};
if (type === 'global') {
globalToastUserConfig = {
...parsedDefaultOptions
};
} else if (type === 'page') {
let ctx = getPageCtx();
ctx.setData({
[`${TOAST_CONFIG_KEY}`]: parsedDefaultOptions
});
}
};
// 重置 toast 基础属性
Toast.resetDefaultOptions = function (type = 'page') {
if (type === 'global') {
globalToastUserConfig = {};
} else {
let ctx = getPageCtx();
ctx.setData({
[`${TOAST_CONFIG_KEY}`]: {}
});
}
};
// 清理所有 toast
Toast.clear = function () {
clearTimeout(timeoutData.timeoutId);