Vue自定义全局加载层

最新推荐文章于 2024-05-06 17:52:06 发布

Maven_

最新推荐文章于 2024-05-06 17:52:06 发布

阅读量4.1k

点赞数

分类专栏：学习笔记文章标签： vue 插件自定义组件 loading层

本文链接：https://blog.csdn.net/github_37373329/article/details/80241370

版权

想自定义一个loading加载层，于是看了看vue的插件文档我用的是第四种方法，在Vue的原型上添加一个loading方法，具体步骤：
1，新建一个loading文件夹，这是你的插件的文件夹，里边包含index.js和一个src，src里就是你用的loading的组件模板，
目录结构：
├── loading
│ ├── src
│ │ ├── loading.vue//组件
│ ├── index.js

然后index.js代码如下：

export default {
        install(Vue){
        let tpl;
        // 弹出框
        Vue.prototype.loading = () =>{
            var loading = Vue.extend(require('./src/loading.vue').default);
            tpl = new loading().$mount().$el;  // 创建实例，挂载到文档以后的地方
            document.body.appendChild(tpl);  
            return tpl
        }
        Vue.mixin({
            methods: {
                hideLoading: function () {
   
                    document.body.removeChild(tpl);
                }
            }
        })
    }
}

因为考虑到以后会移除这个loading层，所以声明一个公共变量tpl，方便到时候移除。
可能是我都vue-loader比较新的原因吧，Vue.extend(require(‘./src/loading.vue’).default）不加“default”会报一个错误（vue2: template or render function not defined）
参考的这里,在Vue全局中混入一个methods（hideLoading）用来隐藏那个loading层。
2，loading.vue的代码如下：

<template>
    <div class="loading_container" @touchmove.prevent @scroll.prevent>
        <div class="spinner">
            <div class="double-bounce1"></div>
            <div class="double-bounce2"></div>
            <p class="loadin_tip">{
   {
   loadingText}}</p>
        </div>

    </div>
</template>
<script type="text/javascript">
export default {
    name: "loading",
    data(){
        return {

        }
    },
    props:{
        loadingText:{
            type:String,
            default:"加载中..." 
        }

    }
}
</script>
<style type="text/css" lang="less" scoped>
.loading_container{
    position:fixed;
    top: