ローディングの要素-UI実用

実際の開発には、どのように我々はそれをしたい領域にマスキングロードを指定するには？
前提条件：
次のようにあなたは、要素-UIを導入しています：
import ElementUI from 'element-ui'
import { Loading } from 'element-ui'

図1は、プロトタイプチェーンVUEで開いローディング方法を定義します。

Vue.prototype.openLoading = function() {
  const loading = this.$loading({ // 声明一个loading对象 lock: true, // 是否锁屏 text: '正在加载...', // 加载动画的文字 spinner: 'el-icon-loading', // 引入的loading图标 background: 'rgba(0, 0, 0, 0.3)', // 背景颜色 target: '.sub-main', // 需要遮罩的区域 body: true, customClass: 'mask' // 遮罩层新增类名 }) setTimeout(function () { // 设定定时器，超时5S后自动关闭遮罩层，避免请求失败时，遮罩层一直存在的问题 loading.close(); // 关闭遮罩层 },5000) return loading; } 

図2に示すように、起動要求インターフェースは、我々が直接プロセス定義VUEのプロトタイプチェーン内にあるため、この方法は、あるので、我々はこれを直接呼び出すことができ呼び出し

const rLoading = this.openLoading();

図3は、閉じ動作を行った後、リクエストが成功しています。

rLoading.close();

著者：リトル日ココア
リンクします。https：//www.jianshu.com/p/df4a45488404
出典：ジェーン・ブック
著者によって予約ジェーンブックの著作権、いかなる形で再現され、承認を得るために、作者に連絡して、ソースを明記してください。