美文网首页
vue页面增加Loading效果,基于Element-UI的Lo

vue页面增加Loading效果,基于Element-UI的Lo

作者: 念念碎平安夜 | 来源:发表于2019-04-26 09:12 被阅读0次

    以Vue-Echarts举例

    一、在v-chart标签里面添加代码

    <v-chart :options="option" :autoresize="true" v-loading="loading"></v-chart>
    

    二、在组件内引入Element-UILoading

    import {
        Loading
    }
    from 'element-ui'
    

    三、再组件data里面增加属性及属性值loading: true

    四、在方法里面写代码,关于组件的开始以及关闭

    startLoading: function() {
    loading = Loading.service({
        lock: true,
        text: '加载中……',
        background: 'rgba(0, 0, 0, 0.7)'
    })
    },
    endLoading: function() {
        loading.close()
    }
    

    五、利用this.loading=truethis.loading=false,对页面的Loading加载进行控制

    相关文章

      网友评论

          本文标题:vue页面增加Loading效果,基于Element-UI的Lo

          本文链接:https://www.haomeiwen.com/subject/wzixnqtx.html