在数据加载时加入 Element-UI 的 Loading 组件

在开发过程中，小伙伴们一定都遇到过当你在一个页面跳转到数据详情页面的时候，发现这个数据量特别大的时候，页面在加载数据的时候需要很长一会的时间，跳转过去的时候会出现白屏不显示，这样就会显得非常的难受，会给用户造成体验感不好的错觉，那么怎么样能够更加平稳的过度过去呢？我翻看了elementUI 的手册 看到了loading 这个组件，可以完美的解决我们上述的问题，是页面跳转的时候显得更加的顺滑，增强用户的体验！
废话不说，开整！

 created() {
    this.fetchData()
  },

 methods:{
	fetchData() {
      var vm = this
      var id = this.$route.params.autoID

      //数据加载时整个页面显示loading
      const loading = this.$loading({
        //lock的修改符--默认是false
        lock: true,
        //显示在加载图标下方的加载文案
        text: 'Loading',
        //自定义加载图标类名(在elementUI 文档查找)
        spinner: 'el-icon-loading',
        //(可以自己定义)遮罩层颜色
        background: 'rgba(0, 0, 0, 1)',
        //loadin覆盖的dom元素节点(整个页面的话'#body' 表格的话'#table'等等 )
        target: document.querySelector('#body')
      });
	  this.axios({
        method: 'GET',
       url:'https://www.fastmock.site/mock/61c8d38ee45149e25e850bb3573314c3/echart/echart/orderData'
      }).then(function(resp) {
        console.log(resp.data)
        })
        
	  //设置延时器，多少时间之后关闭
      setTimeout(() => {
         loading.close();
       }, 2000);
       
      //成功回调函数停止加载
      loading.close()
}

结果

成功搞定！！！

希望这篇写的很烂的文章可以帮助到你一点点！！！