關於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 組件的兩種封裝方式。