From 735a83456616d192b4b812067aa6cfb4015ac7e1 Mon Sep 17 00:00:00 2001
From: earlymeme <zjczoo@aliyun.com>
Date: Thu, 14 Dec 2017 15:23:14 +0800
Subject: [PATCH] loading directive customClass

---
 packages/loading/src/directive.js |  2 ++
 test/unit/specs/loading.spec.js   | 25 +++++++++++++++++++++++++
 2 files changed, 27 insertions(+)

diff --git a/packages/loading/src/directive.js b/packages/loading/src/directive.js
index 69ef16a03..82347c5dc 100644
--- a/packages/loading/src/directive.js
+++ b/packages/loading/src/directive.js
@@ -76,6 +76,7 @@ exports.install = Vue => {
       const textExr = el.getAttribute('element-loading-text');
       const spinnerExr = el.getAttribute('element-loading-spinner');
       const backgroundExr = el.getAttribute('element-loading-background');
+      const customClassExr = el.getAttribute('element-loading-custom-class');
       const vm = vnode.context;
       const mask = new Mask({
         el: document.createElement('div'),
@@ -83,6 +84,7 @@ exports.install = Vue => {
           text: vm && vm[textExr] || textExr,
           spinner: vm && vm[spinnerExr] || spinnerExr,
           background: vm && vm[backgroundExr] || backgroundExr,
+          customClass: vm && vm[customClassExr] || customClassExr,
           fullscreen: !!binding.modifiers.fullscreen
         }
       });
diff --git a/test/unit/specs/loading.spec.js b/test/unit/specs/loading.spec.js
index 71bc923dd..cceede7cd 100644
--- a/test/unit/specs/loading.spec.js
+++ b/test/unit/specs/loading.spec.js
@@ -171,6 +171,25 @@ describe('Loading', () => {
         done();
       });
     });
+
+    it('customClass', done => {
+      vm = createVue({
+        template: `
+        <div v-loading="loading" element-loading-custom-class="loading-custom-class"></div>
+      `,
+
+        data() {
+          return {
+            loading: true
+          };
+        }
+      }, true);
+      Vue.nextTick(() => {
+        const mask = document.querySelector('.el-loading-mask');
+        expect(mask.classList.contains('loading-custom-class')).to.true;
+        done();
+      });
+    });
   });
 
   describe('as a service', () => {
@@ -253,5 +272,11 @@ describe('Loading', () => {
       expect(text).to.exist;
       expect(text.textContent).to.equal('Loading...');
     });
+
+    it('customClass', () => {
+      loadingInstance = Loading({ customClass: 'el-loading-custom-class' });
+      const customClass = document.querySelector('.el-loading-custom-class');
+      expect(customClass).to.exist;
+    });
   });
 });