在vue中全局使用element中的loadding

在Vue中使用Element UI提供的Loading全局组件，可以通过自定义一个全局指令来实现。

首先，在Vue项目的入口文件（一般是main.js）中引入Element UI和Loading组件：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

然后，在项目的根目录下新建一个utils目录，创建一个loading.js文件，用于封装全局Loading指令：

import Vue from 'vue'
import { Loading } from 'element-ui'

const loadingDirective = {
install(Vue) {
Vue.directive('loading', {
bind: function(el, binding) {
const options = {
text: binding.value || '正在加载...', // 设置加载文本，默认为"正在加载..."
spinner: 'el-icon-loading', // 加载图标，这里使用Element UI的loading图标
background: 'rgba(0, 0, 0, 0.7)' // 遮罩层背景色，默认为半透明灰色
}
const instance = Loading.service(options)
el.instance = instance
},
update: function(el, binding) {
el.instance.setText(binding.value) // 更新加载文本
},
unbind: function(el) {
el.instance.close() // 关闭Loading实例
}
})
}
}

Vue.use(loadingDirective)

接下来，就可以在Vue组件中全局使用Loading指令了。例如，在某个Vue组件的template中使用：

<template>
<div>
<button v-loading="loading">加载数据</button>
</div>
</template>

其中，loading是一个布尔类型的data，当loading为true时，显示加载Loading组件；当loading为false时，关闭Loading组件。

这样，就可以在需要异步加载数据时使用全局的Loading指令，实现在Vue中全局使用Element UI中的Loading组件了。