Vue Snackbar 消息条队列显示，依次动画消失的实现

效果预览

思路

0. 封装 Snackbar 组件；
1. 在根路由页面下建立全局 Snackbar 控制器，统一管理 Snackbar；
2. 通过事件通知全局 Snackbar 控制器显示消息；

实现

1. 封装 Snackbar 组件

project/src/components/snackbar.vue

2. 全局 Snackbar 控制器

注册事件总线 EventBus；

project/src/main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

// 创建 Vue 的实例作为事件总线使用，将其挂载到 $eventBus 上，
// 即可在组件中直接使用 this.$eventBus.$emit() 和 this.$eventBus.$on() 来触发/监听事件
Vue.prototype.$eventBus = new Vue()

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

全局 Snackbar 控制器

全局 Snackbar 控制器在根路由页面下监听 showSnackbar 事件，并维护一个消息列表，通过对事件的监听有序的推入、删除消息，从而达到控制 Snackbar 显示的目的；

project/src/App.vue

3. 调用Snackbar

这是一个模拟触发消息的页面；

project/src/views/snackbar.vue

4. 总结

通过上述4步就实现了简单的 Vue Snackbar 消息条队列显示，并且依次动画消失，思路还是很清晰的，主要有3个要点：

• 使用了全局控制器，并通过事件总线 $eventBus 传递消息；
• 在自定义组件中使用 v-model 实现 Snackbar 的删除；
• 利用 Snackbar 索引动态计算 Y 方向上的位移实现 Snackbar 的有序排列；

本教程旨在描述思路，实现比较简单，未做过多封装和定制，希望能帮到有需要的童鞋，如发现任何问题，或有更多实现方式，欢迎一起讨论！

5. 改善

可在本版基础上做更多完善，有兴趣的童鞋可以自己玩玩；

• Snackbar 渐变出现/消失；
• 多种高度的 Snackbar 混合使用；

---

本文出处：https://www.cnblogs.com/zhenfengxun/
本文链接：https://www.cnblogs.com/zhenfengxun/p/12452814.html