Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

聊一聊Toast #4

Open
sliwey-zz opened this issue Feb 18, 2019 · 0 comments
Open

聊一聊Toast #4

sliwey-zz opened this issue Feb 18, 2019 · 0 comments

Comments

@sliwey-zz
Copy link
Owner

在实际项目中,Toast经常是不可或缺的一部分,一些用户的操作反馈,或者异步请求的loading,都可以通过Toast来展现。但是不同的项目中,Toast的展现形式往往是不一样的,如果每个项目都从零开始写,就会造成开发资源的浪费,所以一个通用的Toast组件就显得尤为重要。那么怎么来设计这个通用的Toast呢?

明确需求

Toast的基本需求比较简单:不会获取焦点、不可点击、显示一定时间之后自动消失、不会对用户造成太多干扰。不同之处往往体现在展现形式上:

  • 展现位置不同(顶部、中部、底部)
  • 展现内容不同(纯文字、纯icon、icon + 文字)

为了便于扩展,满足展现内容的个性化需求,还需要支持自定义展现内容,这样,展现位置和展现内容经两两组合之后,基本涵盖了目前常见的Toast展现形式。

然后,考虑一个场景:「操作成功之后弹出Toast,等待2s之后关闭当前页面或跳到下一个页面」

// 假设以下Toast的展现时间均为2s

// 最简单的实现 
// v1.0
Toast.success('操作成功');
setTimeout(() => {
    page.close();
}, 2000)

// 上面的方法有点繁琐,可以利用Toast本身的计时器
// 只需让Toast接收一个回调函数就行
// v2.0
Toast.success('操作成功', () => {
    page.close();
});

// 既然用回调解决,那么可以更进一步
// 让Toast返回Promise,结合async/await,看起来更直观一点
await Toast.success('操作成功');
page.close();

最后,还有一个问题:「同一页面上应不应该出现一个以上的Toast?」

私以为是不应该的,因为Toast起到的作用是弱提示,不应该展示过多的信息,而且Toast显示的时间一般来说都比较短,所以当一个页面上出现多个Toast的时候,用户往往会来不及看全所有信息,这会对用户造成一定程度上的干扰。

所以结合前面所说,我们可以列出Toast应该满足的一些需求:

  • 全局唯一,后面展示的会替换掉前面展示的,即只展示最新的Toast
  • 展示位置可以配置,可提供三个关键字来分别对应顶部、中部、底部
  • 展示内容可以为纯文字、纯icon、icon + 文字,还需要支持自定义内容
  • Toast需要返回Promise
  • 需要提供的api:.show().success().fail().loading().hide().config()

需求实现

明确了需求之后,实现就比较简单了,具体实现跟框架无关,只要满足上述条件就行。

我基于React实现了一个,在线预览地址:https://sliwey.github.io/toast/

代码可以看这里:https://github.com/sliwey/toast/blob/master/src/components/toast/index.js

效果如下:

自定义效果如下:

最后

其实Toast在开发过程中是一个很小的点,但也算是比较高频的组件。设计这类组件的时候需要尽可能多地考虑使用场景,提取出共通的部分,并且保留对个性化需求的开放性。

本文只是抛砖,欢迎大家分享一些组件化方面的思考哈😄~~

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant