我的Vue第一个全局加载插件轮子

封装插件

在某些情况下，我们封装的内容可能不需要使用者对其内部代码结构进行了解，其只需要熟悉我们提供出来的相应方法和 api 即可，这需要我们更系统性的将公用部分逻辑封装成插件，来为项目添加全局功能，比如常见的 loading 功能、弹框功能等。

Vue 提供给了我们一个 install 方法来编写插件，使用该方法中的第一个 Vue 构造器参数可以为项目添加全局方法、资源、选项等。比如我们可以给组件添加一个简单的全局调用方法来实现插件的编写：

目录结构

loading
   └───loading.js
   └───loading.vue

组件界面

<!-- loading.vue -->
<template>
    <div class="custom-loading"  v-if="show">
        <div class="custom-loading-Mask"></div>
        <div class="custom-loading-box">
            <div class="custom-loading-content">
            	<img :src="icon" />
            	<span>{{text}}</span>
            	<em :style="{borderLeftColor:progressColor}"></em>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            // 这里的 icon 要换成你本地的
            icon:require('@/static/logo.png'),
            show:false,
            text:'加载中...',
            progressColor:'#ff0000',
        }
    },
}
</script>

<style>
.custom-loading{
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 9999999999;
	display: flex;
	justify-content: center;
	align-items: center;
}
.custom-loading-Mask {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: rgba(0,0,0,.4);
}
.custom-loading-box{
	width: 138px;
	height: 138px;
	border-radius: 6px;
	background: #fff;
	position: relative;
	z-index: 100;
	display: flex;
	justify-content: center;
	align-items: center;
}
.custom-loading-content{
	width: 106px;
    height: 106px;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-content:center;
	flex-wrap: wrap;
	border: 3px solid #eee;
	position: relative;
}
.custom-loading-content:after{
}
@-webkit-keyframes motion{
	0%{-webkit-transform:rotate(0deg);}
	25%{-webkit-transform:rotate(90deg);}
	50%{-webkit-transform:rotate(180deg);}
	75%{-webkit-transform:rotate(270deg);}
	100%{-webkit-transform:rotate(360deg);}
}

.custom-loading-content img{
	width: 30px;
	height: 30px;
	margin-bottom: 20px;
}
.custom-loading-content span{
	width: 100%;
	text-align: center;
	font-size: 12px;
}
.custom-loading-content em{
	position: absolute;
	width: 106px;
	height: 106px;
	top: -3px;
	left: -3px;
	border: 3px solid transparent;
	border-left: 3px solid;
	border-radius: 50%;
	box-sizing: content-box;
	-webkit-animation: motion 1s infinite linear;
	animation: motion 1s infinite linear;
}
</style>

组件方法

// loading.js
import myLoading from './loading.vue';
export default {
    /* 
    * Vue:Vue 构造器
    * options:可选插件参数
    */
    install(Vue, options) {
        /*
        *Vue.extend： https://cn.vuejs.org/v2/api/#Vue-extend
        *使用基础 Vue.extend 构造器，创建一个“子类” (Loading)。参数是一个包含组件选项的对象(myLoading)。 
        *然后 创建一个 Loading 的实例 Profile 挂载到一个HTMLElement实例上
        */
        const Loading = Vue.extend(myLoading);
        const Profile = new Loading({
            el: document.createElement('div')
        });
		
        /*
        *el： https://cn.vuejs.org/v2/api/#el
        *loading.vue中的template模板内容将会替换挂载的元素。挂载元素的内容都将被忽略。 *所以Profile.$el最终是template里面的内容
        */
        
        //插入到 document.body 
        document.body.appendChild(Profile.$el);
		
        //这里插件接收三个值 icon progressColor 如果注册的时候传入这些值则赋值给组件内默认值。
        if(options){
            if(options.icon)
                Profile.icon = options.icon;
            if(options.progressColor)
                Profile.progressColor = options.progressColor;
        }
        //定义显示隐藏的方法  open 会传入一个text 字符串。如果有则赋值给组件内默认值。
        const myLoadingMethod = {
            open(text) {
                Profile.show = true;
                if(text){
                    Profile.text = text;
                }
            },
            hide() {
                Profile.show = false;
            }
        };
        //添加实例方法 把自定义方法挂载到Vue构造器的上,这样每个实例都可以调用。
        Vue.prototype.$myLoading = myLoadingMethod;
    }
}

全局注册

// main.js
//这里的 icon 要换成你本地的
import myLoading from '@/pages/components/loading.js'
Vue.use(myLoading,{
    icon:require('@/static/logo.png'),
    progressColor:'blue' 
})

调用方法

this.$myLoading.open();
setTimeout(() => {
        this.$myLoading.hide();
}, 3000);