First of all, I would like to thank @Raub for letting me learn a lot of knowledge and record it as my own knowledge reserve

Plug-in classification


Plugins for vue.js should have a public method, Install. The first argument to this method is the Vue constructor, and the second argument is an optional option object:

MyPlugin.install = function (Vue, options) {
    Vue.myGlobalMethod = function() {// 1. Add global methods or attributes, such as vue-custom-element // logic... } Vue.directive('my-directive', {// 2. Add global resources: directives/filters/transitions, such as vue-touchbind(el, binding, vnode, oldVnode) {// logic... }... }) Vue.mixin({ created:function() {// 3. Add some component options via the global mixin method, such as: vuex // logic... }... }) Vue.prototype.$myMethod = function(options) {// 4. Add instance methods by adding them to vue. prototype to implement // logic... }}Copy the code


Loading plug-in

Directory structure:



1. Loading components

The NWD – loading. Vue:

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

<script>
    export default {
        props: {
            show: Boolean,
            text: "Loading..."
        }
    }
</script> Copy the code

2. Encapsulate plug-ins

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; }}}})Copy the code

Note: A constructor NwdLoadingPlugin was created with vue.extend (), followed by an instance of $VM with new NwdLoadingPlugin() and mounted to a div element. Finally, we need through the document. The body. The appendChild ($vm. $el) insert it into the DOM node.

When we create the $VM instance, we can access the properties and methods of the instance. For example, we can change the show value of the NwdLoadingComponent to show and hide it.

Mixin or vue.prototype. $loading is a global $loading event that includes show and hide methods. We can use this.$loading.show() directly on the page to show loading and this.$loading.hide() to close loading.

3. Use plug-ins

main.js

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

Vue.use(NwdLoading)

Copy the code

4. Invoke the plug-in

. vue

export default {
        created() {
            this.$loading.show("Loading content")}}Copy the code