关于element-ui loading 的函数封装和yield 封装

根据官方文档说明，element-ui提供了服务的方式调用。这里提供了两种封装方法。一种是使用函数封装，另一种是ES6的yield封装。

创建一个loading.js文件，里面放入配置代码。

• 第一种使用普通函数，有两种方式调用，根据传入的参数去判断是开启或关闭。这里开启传入start为开启，传入close为关闭。

// loading.js

import { Loading } from 'element-ui'   // 引入loading 服务
// 这里需要使用`this` `this`代表vue的实例 在这里需要在`main.js`中导出vue实例 
// main.js 
// const vm = new Vue({})
// export default vm
import vm from '@/main.js'

const loading = command => {
// command 为 接收的命令 ( start | close )
  if (!command) throw new Error('command is not defined')
  if (command == 'start') {


	// 具体配置信息请看官网文档
    vm.loadingInstance = Loading.service({  
      fullscreen: true,
      target: 'document.body',
      lock: true,
      text: '加载中',
      background: 'rgba(255, 255, 255, .8)'
    })
  } else if (command == 'close') {
    // 以服务的方式调用的 Loading 需要异步关闭
    vm.$nextTick(() => {
      vm.loadingInstance.close()
    })
  }
}

创建完之后，在组件里面就可以使用了

// index.vue

import { Loading } from 'loading'

Loading('start')  // 开启loading


setTimeout(() => {
	Loading('close')  // 2秒后关闭 一般是在请求到数据后关闭
}, 2000)

• 第二种方法使用ES6提供的yield关键字来封装loading

思路就是调用next()来开启，再次调用next()来关闭，在新创建一个loading2.js

// loading2.js
import { Loading } from 'element-ui'

import vm from '@/main.js'

const Loading2 = function* loading() {
  yield vm.loadingInstance = Loading.service({
    fullscreen: true,
    target: 'document.body',
    lock: true,
    text: '加载中',
    background: 'rgba(255, 255, 255, .8)'
  })

  yield vm.$nextTick(() => {
    vm.loadingInstance.close()
  })
}

export default Loading2

使用的时候需要现在data里面定义一个属性，然后根据这个属性来调用。

import { Loading2 } from 'loading2'

data () {
	return {
		Loading: new Loading2()  // 这里使用构造函数的方式创建实例
	}
}


Loading.next()   // 第一次调用开启


setTimeout(() => {
	Loading.next()  // 第二次调用关闭
}, 2000)

- 在创建了生成器后，函数进入挂起开始状态，其中任何代码都未执行。
- 在第一次调用`next()`的时候，开始执行，一直执行到 **第一个`yield`表达式**，（如果不传入参数，则该`yield`返回 `undefined`）会返回一个包含返回值的新对象，随后在挂起执行。生成器在这个状态暂停并等待继续执行。
- 在代码执行完毕后或遇到`return` ，则生成器 执行完成。

以上就是关于element-ui loading 组件的两种封装方式。