VUE 自定义组件

我们使用VUE的时候，经常会使用类似底下这种代码。

import VueRouter from 'vue-router';
Vue.use(VueRouter);

import { Carousel } from 'element-ui';
Vue.use(Carousel);

在使用一些组件的时候，我们可以使用类似底下的方法。来唤起组件的显示或者组件的方法。

        this.$loading({ isLoading: true });

项目中经常会遇到一些通用的全局组件，比如弹窗，比如预加载的loading显示。那么我们如何自定义一些全局组件方便我们调用呢。在以前会使用很笨的方法，就是在app.vue中写入html和css，通过一个全局的布尔值来控制显示或者隐藏。其实我们可以使用vue的组件形式，来便捷我们的开发。接下来我们就开始实现自己的全局loading显示。

创建文件

• 在components底下创建三个文件。
  

  文件结构目录

• loading.vue 就是我们常见的vue组件，里面写了loading
  的样式和组件。里面有两个方法，控制loading的显示和隐藏。

<template>
    <transition name="fade">
        <div class="loading" v-show="isLoading">
            <div class="loading_content">
                <div>
                    <div class="loadingText" v-text="loadingText"></div>
                    <div class="spinner">
                        <div class="dot1"></div>
                        <div class="dot2"></div>
                    </div>
                </div>
            </div>
        </div>
    </transition>
    
</template>

<script>
export default {
    name: 'loading-name',
    data () {
        return {
            loadingText: '',
            isLoading: false
        }
    },
    methods: {
        close() {
            this.isLoading = false;
        },
        show() {
            this.isLoading = true;
        }
    }
}
</script>

• fun.js 创建loading的结构体。先导入loading.vue的组件，通过js代码创建一个组件对象，保存到全局对象中。通过控制外部传入值来控制调用组件的显示或者隐藏方法。

import Vue from 'vue';
let LoadingBox = Vue.extend(require('./loading.vue').default);
let instance = null;

const load = function(options) {
    // 是否处于服务端渲染
    if (Vue.prototype.$isServer) return
    //生成组件
    if (!instance) {
        instance = new LoadingBox({
            data: {
                loadingText: options.loadingText ? options.loadingText : '正在努力加载数据'
            }
        });

        //组件需要挂载在dom元素上
        instance.vm = instance.$mount();
        document.body.appendChild(instance.vm.$el);
    }

    if (options.isLoading) {
        instance.vm.show();
    } else {
        instance.vm.close();
    }
    return instance.vm;
}

export default load;

• index.js 导入loading.vue组件，这里只是为了去获取组件定义的name，也可以自己固定一个名称。导入fun.js的创建结构体的方法，绑定到 vue属性中的$loading。这样全局就可以直接使用方法。

import loading from './loading.vue'
import loadingFun from './fun'

export default (Vue) => {
    Vue.component(loading.name, loadingFun)
    Vue.prototype.$loading = loadingFun
}

• 使用方式。如下，这样是不是就整洁清晰很多，在随便一个组件里面，只要调用this.$loading 就可以唤起加载。

        this.$loading({ isLoading: true });
        setTimeout(()=>{
            console.log('close');
            this.$loading({isLoading: false})
        }, 5000)

总结

主要的核心代码都在fun.js里面，我们可以对组件的显示隐藏进行控制，这样能很好的解耦组件。方便使用。

项目github地址