vue 对elementUI 中的服务方式调用Loading.s

2023-02-08  本文已影响0人  wxw_威

首先创建一个loading.js

import { Loading } from 'element-ui';
// Loading 中的配置项
const loadingOptions = {
  text: '努力加载中...'
}

let loadingInstance;
class LoadingEvent {
  show() {
    loadingInstance = Loading.service(loadingOptions)
  }
  hidden() {
    loadingInstance.close()
  }
}
export default new LoadingEvent()

在main.js 中引用

import loading from '@/utils/loading'
...
// Vue.prototype.$loading 这样定义无效,应该是element 定义的loading覆盖了
Vue.prototype.$loads = loading
...

在.vue文件中使用

login() {
  // 显示loading
  this.$loads.show()
    setTimeout(() => {
        // 关闭loading
       this.$loads.hidden()
    }, 2000);
}

上一篇下一篇

猜你喜欢

热点阅读