Разработка Vue-плагина

внешний интерфейс JavaScript Vue.js NPM

Прежде всего, я хотел бы поблагодарить @raub за то, что он позволил мне получить много знаний и записать их как свой собственный запас знаний на долгое время.

Классификация плагинов


Плагины 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 上实现
        // 逻辑...
    }
}


Как написать загрузочный плагин

Структура каталога:


1.загрузка компонентов

nwd-загрузка.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;
                    }
                })
	}
}

Примечание. Конструктор NwdLoadingPlugin создается с помощью метода Vue.extend(), а затем мы создаем экземпляр $vm с помощью new NwdLoadingPlugin() и монтируем его в элемент div. Наконец, нам нужно вставить его в узел DOM через document.body.appendChild($vm.$el).

Когда мы создаем экземпляр $vm, мы можем получить доступ к свойствам и методам экземпляра.Например, мы можем изменить значение show компонента NwdLoadingComponent, чтобы управлять его отображением и скрытием через $vm.show.

Наконец, мы добавили глобальное событие $loading через Vue.mixin или Vue.prototype.$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内容")
        }
 }


Категории