Vue.js实践（3）：完成一个美丽、天真、可复用的提醒组件

此次的教程里，我们要把组件化举行到底！近来半年的几个项目中，都遇到了须要运用Toast或许Notification组件的状况。在如今已有的一些基于Vue.js开辟的组件库，都没有找到太适宜的，所以自身重头完成了一个。历经几个项目的考验，这个提醒组件的功用已愈来愈完美，此次就分享一下组件以及其完成思绪吧。

GitHub 堆栈：https://github.com/Yuyz0112/vue-notie
Demo 地点：http://lab.myriptide.com/vue-notie/

深切组件化，组件的拆分、整合与复用

Vue.js的组件化可以说是其招牌特征之一，而在现实运用时，并不是一味地寻求组件颗粒越小越好，而是须要依据项目的现实需求，来剖析自身须要什么级别的组件。

例如在一个SPA中，我可以有主页、文章列表页、文章页、个人中间页4个重要的视图，因而我将其离别对应的写成4个组件。

然则在现实编写的过程当中，发明他们共用了一致套侧边栏，而侧边栏对应的代码也在4个组件中反复书写了4次。所以可以将侧边栏零丁写成一个组件举行复用。

以后，我们可以发明可以复用的另有一些表单、按钮之类的内容我们都可以复用成组件。但现实上，我们也会发明太过的组件化会致使代码量上升、开辟时刻增添以及分外的数据通报等等。所以假如不盘算制造一个完全的组件库，那末在现实项目中做到按需拆分、整合即可，不必太过的寻求每一个可复用的部份都写成单个组件。

为何须要一个提醒组件

因为alert大部份时刻不能满足我们的需求啊。每每项目里须要一个相似于alert的东西，用雅观、可定制的体式格局提醒用户一些信息，因而如许一个提醒组件很有必要。

同时，我们也不愿望一致时刻涌现多个提醒殽杂用户，因而在设想上，我们将提醒组件设定为具有唯一性，全部运用中各个视图挪用的都是一致个提醒组件。

Show me the code

接下来，由简入繁顺次完成提醒组件的各个功用。

基本功用

最基本的功用固然是触发后显现，而且可以以某种体式格局封闭。唯一须要自定义的部份，就是详细显现的内容。所以最最先组件长如许：

思绪很简朴，props通报两个数据，show用于控制显现，options传入包含内容在内的自定义内容。为了让提醒的显现越发天然，增加了一个滑动进入和脱离的transition。

注重：这里的封闭按钮是经由过程css完成的，假如在你的项目中有对应的icon，可以将其替代掉。

在此处，也可以运用slot来举行内容的通报，但考虑到以后另有别的参数须要通报至组件内，一次用一个一致的对象options举行通报。

自定义款式

一般提醒的内容品种很多，有的是胜利提醒，有的是正告，有的则是报错。因而我们须要定义差别的款式以表达差别的内容。
要领很简朴，在options中传入背景色和笔墨色彩两个参数，假如组件中检测到了传入的款式参数，就用其替代默许款式。

Vue.js在处置惩罚动态款式时异常天真，为了让代码更清楚，我没有挑选将动态款式内联，而是零丁运用一个盘算属性setStyle举行设定：

computed: {
setStyle () {
return {
color: this.options.textColor || '#fff',
background: this.options.backgroundColor || '#21e7b6'
}
}
}

如许一来，只要在options中一并传入textColor和backgroundColor两个属性，就可以轻松自定义提醒款式了。

自动封闭

很多时刻，我们愿望提醒在肯定时刻以后可以自动封闭，因而组件也须要扩大出一个自动封闭的形式。一样的，在“数据驱动”的头脑下，我们应当供应一个数据，用来表明这个提醒是不是自动封闭。

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要领。

综述

经由过程这个提醒组件，我们更闇练的控制了Vue.js的组件体系、数据通报、盘算属性、transition动画等特征。别的此组件已可以直接用于临盆环境中，迎接star、fork、pr。