自己动手写一个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个下班的夜晚，任务很重，但是从来不会放弃的。这一次，不会再半途而废了。

自己动手写一个Vue插件（MD.7）

猜你喜欢