Vue组件挂载到全局方法中

组件:src/components/loading/loading.vue

<template>

    //...

</template>

<script>

export default {

    data() {

        visible:false

    }

}

</script>

<style>

//...

</style>

src/components/loading/index.js

import Vue from 'vue'

import loading from './loading.vue'

const MyLoading = Vue.extend(loading)

const install = () => {

    Vue.prototype.$loading = () => {

        var instance = new MyLoading({

            data:{

                visible:true

            }

        })

        instance.id = 'loading-component'

        instance.vm = instance.$mount()

        instance.vm.close = () => {

            instance.visible = false

        }

        document.body.appendChild(instance.vm.$el)

        return instance.vm

    }

}

export default {

    install

}

然后在main.js中引入

import Loading from './components/loading/index.js'

Vue.use(Loading)

然后在每个组件中都可以通过方法调用了。(示例3秒后关闭loading)

var loading = this.$loading()

setTimeout(()=>{

    loading.close();//

},3000)

欢迎指正。。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容