如何使用loading
util.js
import {Loading, Message} from 'element-ui'
const utils = {}
/**
* 打开加载框
* @returns {*}
*/
utils.loading = (text, icon) => {
text = text ||'Loading'//默认
icon = icon || 'el-icon-loading'
Loading.service({
lock: true,
text,
spinner: icon,
background: 'rgba(0, 0, 0, 0.3)'
});
}
/**
* 关闭加载框
* @returns {*}
*/
utils.closeloading = () => {
Loading.service({}).close();
}
export default utils
在main.js中引入utils.js
import utils from './util/utils.js'
//挂载
Vue.prototype.$utils = utils;
使用
在.vue文件中使用
使用:
<template>
<div></div>
</template>
<script>
export default {
name: "loading",
mounted() {
this.$utils.loading()
}
}
</script>
<style scoped>
</style>
在任何地方都可以关闭:这个打开的loading,比如在另一个文件中使用
:
<template>
<div></div>
</template>
<script>
export default {
name: "closeloading",
mounted() {
this.$utils.closeloading()
}
}
</script>
<style scoped>
</style>
在项目的任何.js文件中使用
import Vue from 'vue'//先引入vue
//直接调用Vue原型上的方法使用即可
Vue.prototype.$utils.loading()
在任何地方关闭
import Vue from 'vue'//先引入vue
//直接调用Vue原型上的方法使用即可
Vue.prototype.$utils.closeloading()
理解
用一个挂载到window上的例子理解:就相当于挂载到了window上,然后任何地方就能用了
//main.js
import {Loading, Message} from 'element-ui'
window.loading = (text, icon) => {
text = text || 'Loading'
icon = icon || 'el-icon-loading'
Loading.service({
lock: true,
text: text,
spinner: icon,
background: 'rgba(0, 0, 0, 0.3)'
});
}
window.closeloading = () => {
Loading.service({}).close();
}
使用的时候就在任何时候都能用window.loading()
,window.closeloading()
其实还是模块化,原型理解不够深刻,不知道ES6模块化的引进来到底是什么意思,到底有什么作用