loading

如何使用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模块化的引进来到底是什么意思,到底有什么作用