vue Element ui增加loading效果

1.在需要加loading 的标签加v-loading="loading"，该项目为折线图

<div id="gate-shore1" class="gate-shore-wrap" v-loading="loading"></div>

2.在组件内引入Element-UI的Loading

import {
    Loading
}
from 'element-ui'

3.在组件data里面增加属性及属性值loading: true

4.在方法里面写代码，关于组件的开始以及关闭

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

5.利用this.loading=true和this.loading=false，对页面的Loading加载进行控制

Vue