咱們一塊兒寫一個Vue的Loading插件吧。

Vue插件與組件

Vue插件與組件
組件 (Component) 是用來構成你的 App 的業務模塊，它的目標是 App.vue。
插件 (Plugin) 是用來加強你的技術棧的功能模塊，它的目標是 Vue 自己。
此篇文章主要是寫一個編寫插件的過程,具體功能還待完善。

就Loading爲例：若是是組件,你須要在父組件裏引入,註冊 · · · ·
若是你封裝成一個全局的插件,你就能夠直接this.loading.show()。隨時顯示它。

開發插件

Vue.js 的插件應該暴露一個 install 方法。這個方法的第一個參數是 Vue 構造器，第二個參數是一個可選的選項對象。

涉及知識點：

Vue.extend
el

目錄結構：

loading
   └───index.js
   └───loading.vue
複製代碼

index.js暴露一個 install 方法,loading.vueloading的UI界面

組件內容：

<!-- 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:require('../assets/img/wx.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>
複製代碼

install 方法

//index.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 './loading'
Vue.use(myLoading,{
    icon:require('./assets/img/ali.png'),
    progressColor:'blue' 
})
複製代碼

使用

在須要使用loading組件裏

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

此文章主要是簡單的說了一下如何寫一個插件,有興趣的童鞋能夠完善一下,並開發一些其餘的插件Toast,Alert,併發布到npm留着本身使用。