插件也是組件化的一部分把篓。今天來(lái)寫一個(gè) toast 插件单旁。
什么是插件？其實(shí) vue-router 就是 Vue 的一個(gè)插件巍沙，插件通常用來(lái)為 Vue 添加全局功能葵姥。
今天的 toast 就是一個(gè)全局要使用的功能，比如用戶下單時(shí)對(duì)用戶進(jìn)行提示句携，或者在用戶刪除操作時(shí)對(duì)用戶進(jìn)行提示榔幸。
這個(gè) toast 的功能點(diǎn)是
- 顯示特定信息
- 在特定時(shí)間內(nèi)銷毀
當(dāng)然可以使用組件化的思想封裝一個(gè)toast組件。
比如像這樣 Vue 組件 | 如何從零封裝一個(gè)tabbar組件矮嫉，從這里我們可以知道流程是下面的樣子削咆。
- 編寫組件
- 導(dǎo)入組件
- 將值傳給組件
- 注冊(cè)組件
- 使用組件
這種方式一是步驟多，二是使用組件時(shí)代碼分散蠢笋，代碼要寫在文件的不同部分拨齐。使用時(shí)有點(diǎn)麻煩。要照顧數(shù)據(jù)和 DOM昨寞，有沒(méi)有可能只關(guān)注數(shù)據(jù)瞻惋，這里是要展示的信息和展示的時(shí)間。
使用過(guò) vue-router 的编矾，可以知道 vue-router 可以這樣使用：
this.$router.push('/detail/' + this.goodsItem.iid)
如果我們可以這樣使用 toast 就好了：
this.$toast.show('toast 加載成功' , 2000)
那么重點(diǎn)來(lái)了，搞一個(gè)插件的流程是什么馁害？
首先窄俏，明確一點(diǎn)我們先將 DOM 搞出來(lái)，一個(gè)居中的框碘菜，里面有提示文字凹蜈，不妨寫在一個(gè) Vue 文件中。
<!-- Toast.vue -->
<template>
<div class="toast" v-show="isShow">
<div>{{message}}</div>
</div>
</template>
<style scoped>
/* fixed 居中 */
.toast {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 8px 10px;
color: aliceblue;
z-index: 9999;
background-color: rgba(0, 0, 0, 0.75);
}
</style>
下面是功能代碼忍啸，一定時(shí)間消失仰坦，可以使用setTimeout()并設(shè)置默認(rèn)事件2000毫秒。
<!-- Toast.vue -->
<script>
export default {
name: "Toast",
data() {
return {
message: "",
isShow: false
};
},
methods: {
show(message, duration = 2000) {
this.isShow = true;
this.message = message;
setTimeout(() => {
this.isShow = false;
this.message = "";
}, duration);
}
}
};
</script>
第一步創(chuàng)建組件成功计雌，和組件化創(chuàng)建區(qū)別不大悄晃。
下面進(jìn)入第二步，一開(kāi)始就將 toast 組件的 模板 掛到 DOM 中，這樣我們?cè)谑褂貌寮r(shí)就不用管 DOM 了妈橄，也就是省了將標(biāo)簽寫到 template 中的步驟庶近，也是和組件化不同的重要一點(diǎn)。
// index.js
import Toast from './Toast'
const obj = {}
obj.install = function (Vue) {
console.log('toast install')
// 1.創(chuàng)建組件構(gòu)造器
const toastContrustor = Vue.extend(Toast)
// 2.new眷蚓，根據(jù)組件構(gòu)造器鼻种，創(chuàng)建一個(gè)組件對(duì)象
const toast = new toastContrustor()
// 3.將組件對(duì)象掛載到元素上
toast.$mount(document.createElement('div'))
// 4.toast.$el對(duì)應(yīng)的是div
document.body.appendChild(toast.$el)
Vue.prototype.$toast = toast
}
export default obj
到 main.js 中全局安裝 toast 插件。
// main.js
import toast from 'components/common/toast'
// 安裝toast插件
Vue.use(toast)
使用沙热，隨便使用：
this.$toast.show('toast 加載成功' , 2000)
this.$toast.show('cemcoe' , 4000)
這樣使用起來(lái)就簡(jiǎn)單了叉钥。我們要使用相應(yīng)功能時(shí)只用一句就搞定了，和組件化相比確實(shí)簡(jiǎn)潔了很多篙贸。
插件的使用場(chǎng)景是DOM樣式變化不大的投队，并且會(huì)頻繁使用的地方∏革‘
當(dāng)我們要實(shí)現(xiàn)輕提示功能時(shí)蛾洛，只需傳入要傳入的展示信息和展示時(shí)間就好了。
