前言
我們在項(xiàng)目中都會用到toast,loading加載器淮韭。特別是在進(jìn)行移動端的項(xiàng)目開發(fā)的時候贸伐，
進(jìn)行異步操作的時候去等待抡草，在必要的時候用toast給用戶提示。在app開發(fā)中龙助，iOS有成熟的MBProgressHUD插件等等砰奕。
在web前端也有很多第三方庫也提供了這些組件，比如mint-ui,element-ui等都包含這些組件提鸟，
但是存在一個缺點(diǎn)军援，當(dāng)我們只需要使用toast，loading組件称勋，并用不到其他組件的時候胸哥，我們還是需要安裝整個組件庫，
會導(dǎo)致我們依賴的第三方庫增大赡鲜。所以我就做了一個輕量級的toast,loading插件vue-toast-indicator空厌。
這里小編推薦一個福利，更多精彩內(nèi)容請點(diǎn)擊鏈接银酬，點(diǎn)擊這里
組件的使用
導(dǎo)入包嘲更，全局使用
import {
Toast,
Indicator
} from './vue-toast-indicator'
Vue.use(Toast);
Vue.use(Indicator);
toast的使用
this.$Toast({message:"toast...",position:"bottom"})
indicator使用
// 加載
this.$Indicator({message:"加載中..."})
// 消失
setTimeout(()=>{
this.$Indicator.hidden();
},600);
組件的原理
封裝一個vue組件，創(chuàng)建vue組件揩瞪，然后動態(tài)插入到body節(jié)點(diǎn)
舉個栗子：
<template>
<div>
hello 小猿
</div>
</template>
<script>
export default {
name: 'toast',
}
</script>
<style>
</style>
上面創(chuàng)建了一個最簡單的vue組件
假設(shè)我們導(dǎo)入該組件名字是HelloWorld
// 構(gòu)造組件
const HelloWorldConstructor = Vue.extend(HelloWorld);
export default {
install(Vue,opt){
Vue.prototype.$component = function(options = {}) {
let parentNode = document.createElement("div");
let instance = new ToastConstructor().$mount(parentNode);
document.body.appendChild(instance.$el); // 動態(tài)插入
return instance;
}
}
}
就是這么簡單赋朦，上面用到了vue的插件，自定義vue插件需要導(dǎo)出一個install方法
使用就更簡單了
import xxx from 'my-lib'
Vue.use(xxx);
在項(xiàng)目中的任意vue組件可以通過this.$component();使用了
