自己動手寫一個Vue插件（MD.7）

造不完的輪子，封不完的插件。網上什麼都有，但是有那找的功夫，自己都寫完了。漫島仍然在向前推進，只是你們看不到最新的更新內容了，剩餘的不會展示，等以後上線了再去看把。

講一下如何寫一個的Vue插件，（以一個極其簡單的loading效果爲例），會了這個其他不愁。
第一步，在components目錄建一個Loader.vue文件用來當做我們的loading模版,簡單寫了下(我用的less)。

<!--加載提示-->
<style scoped lang='less'>
    .loader {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, .4);
        z-index: 8;
    }

    .loader-modal {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        width: 120px;
        height: 68px;
        background-color: #fff;
        z-index: 9;
        border-radius: 5px;
        .load-icon {
            display: block;
            margin: 5px auto;
        }
        p {
            text-align: center;
            color: #333;
        }
    }
</style>

<template>
    <transition name='fade' v-if="showLoader">
        <div class="loader">
            <div class="loader-modal">
                <!--這裏是一個加載的小圖標-->
                <img src="../assets/icon-heart.png" class="load-icon" />
                <p>{{tips}}</p>
            </div>
        </div>
    </transition>
</template>

<script>
    export default {
        name: "LoaderTepmlate",
        data() {
            return {
                showLoader: false
            }
        },
        methods: {
            hide() {
                this.showLoader = false
            }
        }
    }
</script>

嗯，就是這麼簡單的一個模版，我們只控制傳進來的文字說明。
接下來就在main.js裏面開搞了，說白了就是利用vue.extend()來創建一個loader實例，再掛載在當前的頁面。
代碼如下：

import LoaderTepmlate from '@/components/Loader.vue'

let loader={
    install:null
}

loader.install=function(Vue,options){
    //設定全局作用域方便給其增加自定義方法
    let myLoader;
    Vue.prototype.$loader=function(options){
        if(myLoader) return;
        if(options==undefined){
            options={
                showLoader:true,
                tips:"默認提示"
            }
        }else{
            options.showLoader=true;
        }

        var Loader=Vue.extend(LoaderTepmlate);
        //創建一個loader實例
        myLoader=new Loader({
            data:options
        }).$mount();
        //掛載到頁面 
        document.querySelector("body").appendChild(myLoader.$el);
    }
    //給$loader增加一個手動調用的hide方法，這個纔是亮點所在，有一天你會明白的。
    Vue.prototype.$loader.hide=function(options){
        myLoader.hide();
    }

}

Vue.use(loader);

在任意頁面調用this.$loader()就可以喚醒加載提示了，記得傳參，手動關閉的方法調用this.$loader.hide()即可 ，或者你自己再加個關閉時間參數，我之所以加hide是爲了演示如何給插件追加手動操作的方法，具體調用樣例如下：

let vm=this;
this.$loader({
    tips: '加載中...'
});

setTimeout(vm=>{
    this.$loader.hide();
},2000)

好了，要睡覺了，還剩72天開發時間用來上線漫島，實際工作時間只有52個下班的夜晚，任務很重，但是從來不會放棄的。這一次，不會再半途而廢了。