用户登录

在界面上显示的通知提示信息,可以在一定时间以后自动被收回。回到项目,先打开 app-notification 这个 store 模块。 在模块的 mutations 里面添加一个修改器,名字叫 deleteMessage ,接收一个 state 参数,还有一个 data 参数。

这个修改器可以设置一下 state.messages 这个数据的值,等于 state.messages ,用一下 filter 这个方法,提供一个回调,当前项目叫 message, 返回的是 message 的 id 属性不等于 data 的项目。

动作

下面再去定义一个动作,放在 actions 里面,动作的名字叫 dismissMessage ,把 commit 解构出来,再加上一个 message 参数。

在这个动作里面,添加一个 timeout ,等于判断一下 message 里有没有 duration 属性,如果有,就让 timeout 等于 message.duration,如果没有,就叫 timeout 等于 3000 毫秒。

下面可以用一下 setTimeout ,提供一个处理器,倒计时时间用 timeout 表示,在这个处理器函数里,可以 commit 一个修改,名字是 deleteMessage ,提供一个 message.id 这个数据。

使用

在这个 pushMessage 动作里可以再派发一个动作,把 dispatch 从它的 context 参数里解构出来。最后可以再 dispatch 一个动作,动作的名字叫 dismissMessage,提供一个 message 数据。

预览

回到浏览器可以测试一下,点击 按钮,显示一条通知提示信息,默认 3 秒钟以后,这条信息会自动消失。

收回通知提示信息(dismissMessage)《 Vue.js 项目实践:消息提示 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点