Vue-插件開發

首先感謝@勞蔔 讓我學習了很多知識，記錄下來 作為自己的知識儲備 長期翻看

插件分類

Vue.js 的插件應當有一個公開方法 install 。這個方法的第一個參數是 Vue 構造器 , 第二個參數是一個可選的選項對象:

MyPlugin.install = function (Vue, options) {
    Vue.myGlobalMethod = function () {  // 1. 添加全局方法或屬性，如: vue-custom-element
          // 邏輯...
    }
    Vue.directive('my-directive', {  // 2. 添加全局資源：指令/過濾器/過渡等，如 vue-touch
        bind (el, binding, vnode, oldVnode) {
            // 邏輯...
        }
        ...
    })
    Vue.mixin({
        created: function () {  // 3. 通過全局 mixin方法添加一些元件選項，如: vuex
            // 邏輯...
        }
        ...
    })
    Vue.prototype.$myMethod = function (options) {  // 4. 添加執行個體方法，通過把它們添加到 Vue.prototype 上實作
        // 邏輯...
    }
}複制代碼           

loading插件寫法

目錄結構：

1.loading元件

nwd-loading.vue：

<template>
    <div class="nwd-loading" v-show="show">
        <div>{{text}}</div>
    </div>
</template>

<script>
    export default {
        props: {
            show: Boolean,
            text: "正在加載中..."
        }
    }
</script> 複制代碼           

2.封裝插件

index.js

import NwdLoadingComponent from './nwd-loading'

let $vm;

export default {
	install(Vue,options) {
		if(!$vm) {
		    const NwdLoadingPlugin = Vue.extend(NwdLoadingComponent);
		    $vm = new NwdLoadingPlugin({
	                el: document.createElement('div')
	            });
		}
		$vm.show = false;
		let loading = {
                    show(text) {
                        $vm.show = true;
                        $vm.text = text;
                        document.body.appendChild($vm.$el);
                    },
                    hide() {
                        $vm.show = false;
                    }
                };
                if (!Vue.$loading) {
                    Vue.$loading = loading;
                }
                // Vue.prototype.$loading = Vue.$loading;
                Vue.mixin({
                    created() {
                        this.$loading = Vue.$loading;
                    }
                })
	}
}複制代碼           

注釋：通過Vue.extend()方法建立了一個構造器NwdLoadingPlugin，其次我們再通過new NwdLoadingPlugin()  建立了執行個體$vm，并挂載到一個div元素上。最後我們需要通過document.body.appendChild($vm.$el)将其插入到DOM節點中。

當我們建立了$vm執行個體後，我們可以通路該執行個體的屬性和方法，比如通過$vm.show就可以改變NwdLoadingComponent元件的show值來控制其顯示隐藏。

最終我們通過Vue.mixin或者Vue.prototype.$loading來全局添加了$loading事件，其又包含了show和hide兩個方法。我們可以直接在頁面中使用this.$loading.show()來顯示加載，使用this.$loading.hide()來關閉加載。

3.使用插件

main.js

import NwdLoading from '@/components/nwd-loading/index.js'

Vue.use(NwdLoading)

複制代碼           

4. 調用插件

....vue

export default {
        created() {
            this.$loading.show("loading内容")
        }
 }
           

原文釋出時間為：2018年06月25日

原文作者：李赫feixuan

本文來源：

掘金 https://juejin.im/post/5b123ace6fb9a01e6f560a4b

如需轉載請聯系原作者