将vue加载蒙版函数化

将vue加载蒙版函数化

实现效果

• 

创建londing.js函数文件

• 

londing.js中

 

import {Loading} from 'element-ui';

let loadingInstance;

export function loading_start() {
  loadingInstance = Loading.service({
    fullscreen: true,
    lock: true,
    text: '数 据 加 载 中，请 稍 等 ！',
    spinner: 'el-icon-loading',
    background: 'rgba(0, 0, 0, 0.7)'
  });
}

export function loading_end() {
  loadingInstance.close();
}

页面中调用

 

<script>
  import {loading_start,loading_end} from '../lib/loading/loading.js';


  methods: {
    test: function () {
        //显示加载
        loading_start();

        //2秒后关闭加载
        setTimeout(() => {
            loading_end();
        }, 2000);
    }
  }         

</script>