Vue自定义全局加载层

版权声明:本文为博主原创文章,未经博主允许不得转载。 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:0;
    left:0;
    bottom:0;
    right:0;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,.5);
    text-align:center;
    >span{
        position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);
    }
}
.spinner {
    width: 60px;
    height: 60px;
    position: relative;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}
.loadin_tip{
    color: #FFF;
    position: relative;
    top:64px;
}
.double-bounce1, .double-bounce2 {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #67CF22;
    opacity: 0.6;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-animation: bounce 2.0s infinite ease-in-out;
    animation: bounce 2.0s infinite ease-in-out;
}
.double-bounce2 {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
}
@-webkit-keyframes bounce {
    0%, 100% { -webkit-transform: scale(0.0) }
    50% { -webkit-transform: scale(1.0) }
}
@keyframes bounce {
    0%, 100% {
        transform: scale(0.0);
        -webkit-transform: scale(0.0);
    } 50% {
        transform: scale(1.0);
        -webkit-transform: scale(1.0);
    }
}
</style>
<style type="text/css" lang="less">
.loading{
    .rolling{
        width:50px;
        height:50px;
        border-radius:50%;
        border:1px solid transparent;
        border-top-color: #dedede;
        animation:rolling 2s infinite;
    }
}
@keyframes rolling{
    from{
        transform:rotate(0deg);
        -ms-transform:rotate(0deg); /* Internet Explorer */
        -moz-transform:rotate(0deg); /* Firefox */
        -webkit-transform:rotate(0deg); /* Safari 和 Chrome */
        -o-transform:rotate(0deg); /* Opera */
    }
    to{
        transform:rotate(360deg);
        -ms-transform:rotate(360deg); /* Internet Explorer */
        -moz-transform:rotate(360deg); /* Firefox */
        -webkit-transform:rotate(360deg); /* Safari 和 Chrome */
        -o-transform:rotate(360deg); /* Opera */
    }
}
</style>

3,然后使用的时候,在addNote.vue里

<template>
    <div class="addNote animated bounceInRight">
      <header class="clearfix">
        <span class="pull_left" @click="$router.go(-1)">&times;</span>
        <button type="button" class="pull_right" @click="open">发表</button>
      </header>
      <mt-field label="" placeholder="写点什么呢..." type="textarea" rows="4" v-model="note" :attr="{'maxlength':150}"></mt-field>
      <label for="uploadimg" class="iconfont">&#xe60c;</label>
      <input type="file" name="" accept="image/gif, image/jpeg" id="uploadimg" style="display:none" @change="uploadimg($event)">
      <!-- <loading v-show="!is_uploading"></loading> -->
    </div>
    <!-- <div class="loading" v-show="is_uploading">
        <mt-spinner :type="0" color="#26a2ff"></mt-spinner>
     </div> -->
</template>
<script type="text/javascript">
import { Field,Indicator,Toast} from 'mint-ui';
import loading from "@/base/loading";
import axios from 'axios';
    export default {
        name:"addNote",
        data(){
            return {
                note:"",
                is_uploading:false
            }
        },
        components:{
            Indicator
        },
        methods:{
            uploadimg(e){
                let data=e.target.files[0];
                var formData=new FormData();
                this.loading();
                // Indicator.open('上传中...');
                formData.append("uploadimg",data);
                let config = {
                    headers:{'Content-Type':'multipart/form-data'},
                    onUploadProgress: function (progressEvent) {
                        console.log(progressEvent);
                    }
                };
                axios.post("http://localhost:80/VueProject/Vue/index.php",config).then((res)=>{
                    console.log(res);
                }).catch((res)=>{
                    console.log(new Error(res));
                    this.hideLoading();
                    Toast({
                        message:"网络错误"
                    })
                })
            },
            open(){
                this.loading();
            }

        },
        mounted(){
            /*console.log();
            var that=this;
            setTimeout(function(){
                // that.hideLoading();
            },2000)*/
        }
    }
</script>
<style type="text/css" lang="less">
.addNote{
    button{
        border: 0;
        background: 0;
        font-size: 15px;
        color: #0761e8;
        outline: 0;
    }
    label{
        font-size: 70px;
        margin: 0 auto;
        display: block;
    }
    span.pull_left{
        font-size:20px;
    }
}
</style>

因为已经添加到Vue的原型上了,所以Vue的实例上都会有这个方法,就可以直接调用this.loading()了

以作记录!!!!
目前这个插件不支持自定义参数,以后慢慢完善!

展开阅读全文

没有更多推荐了,返回首页