很多时候，我们希望提示在一定时间之后可以自动关闭，因此组件也需要扩展出一个自动关闭的模式。同样的，在“数据驱动”的思想下，我们应该提供一个数据，用来表明这个提示是否自动关闭。
options中的autoClose属性就是这个作用。同样的，自动关闭的延迟时间显然也要能够自定义，因此还一同添加了showTime这一属性。
自动关闭本身不太复杂，我们只需要使用setTimeout，定义一个计时器即可。
首先是监听提示组件的显示。
在这里，我通过watch监听options的变化来处罚计时器。由于我们已经定义了一个close方法用于关闭计时器，并且在关闭时重置了show和options的值，所以在options变化时，只需要判断options中的autoClose是否为true，就能知道是否需要启动计时器了。这里单独使用一个countdown方法来处理定时器相关的操作。
新增代码如下：
data () { return { timers: [] } }, methods: { countdown () { if (this.options.autoClose) { const t = setTimeout(() => { this.close() }, this.options.showTime || 3000) this.timers.push(t) } } }, watch: { options () { this.timers.forEach((timer) => { window.clearTimeout(timer) }) this.timers = [] this.countdown() } }
细心地你肯定会发现，这段代码中，有一些奇怪的处理。我们定义了一个空数组timers，并且每次开始一个计时器的时候，就把计时器存入数组中，而每次options变化时，我们也从timers中遍历所有计时器并取消，之后清空timers。
这个做法，主要是为了避免一个计时器还没有结束时，又开始一个新的提示所引发的提示被提前关闭的清空。举个例子，如果没有这样的处理，那么先发出一个自动关闭的提示，在其没自动关闭之前，就再发出一个新的提示。那么第一个提示的定时器依然会错误的关闭新提示。
这样的问题主要是由于我们所有的计时器都是在同一个组件中，本质上都是同一个提示，因此需要清除计时器，避免冲突。许多组件库中类似的功能组件，是采用每一条提示就新生成一个提示组件的方式来实现的。但是那样在多个提示连续出现时，就会出现堆叠在一起，又各自离开的情况。
之前的版本中，我的提示组件也采用了类似的设计方式，但是在最近的一个项目中，需要实现半透明的提示组件，就出现了堆叠后看不清提示文字的现象，才使用了现在新的模式。
进一步扩展
紧接着，我拓展了一个自动关闭模式下的倒计时条功能。思路上没有使用Vue.js的transition系统，而是采用了Css3本身的动画系统。在一个自动关闭的提示被初始化时，为计时条添加一个样式，效果是向X轴负方向移动100%，transition时间则通过计算属性对应设定。具体实现可以参考源代码，这里不多做赘述。
增强灵活性
最后则是让提示组件更灵活。有的时候，我们想展示的可能是可以自定义样式的文本、亦或是一个超链接甚至更多。而Vue.js实现起来不要太简单。我们只需要将组件中用于渲染的{{ options.content }}变为{{{ options.content }}}即可，对于3重花括号的模板，Vue.js会将其中的HTML标签按照正常内容渲染。
如此一来，我们就可以将任何HTML内容放入提示中了。当然一定要注意避免将用户输入的内容渲染到3重花括号的模板中，避免XSS攻击。
结合vuex
很多时候，我们会把提示组件引入到App.vue这个根组件中，但是发出提示的可能是组件树中的任何一个组件。如果不想代码中遍布各种dispatch和broadcast，那么引入vuex来进行管理是个很好的方案。
大致的思路如下：
// store.js const state = { show: false, options: { autoClose: false, content: 'notice content' } } const mutations = { NEW_NOTICE (state, options) { state.show = true state.options = options }, CLOSE_NOTICE (state) { state.show = false state.options = {} } } // actions.js export const newNotice = ({dispatch}, options) => { dispatch('NEW_NOTICE', options) } export const closeNotice = ({dispatch}) => { dispatch('CLOSE_NOTICE') } // Notification.vue vuex: { getters: { show: state => state.show options: state => state.options }, actions: { close: closeNotice } } // 任意调用notice的组件 vuex: { actions: { notice: newNotice } }
引入vuex后，按上述代码进行配置，就可以在任意一处组件中，使用this.notice({options})传递数据。不过由于vuex的单项数据流动特性，所有对state数据的操作都必须经过actions调用mutations实现，包括提示组件中的close方法也要替换成actions中的closeNotice方法。
综述