From fd8648a4b35200c0dff97f626529f7a5a3d348ea Mon Sep 17 00:00:00 2001
From: Jiewei Qian <wacky6@users.noreply.github.com>
Date: Tue, 6 Mar 2018 18:53:06 +1100
Subject: [PATCH] Button: loading implies disabled (#10020)

* button: loading implies disabled

fix https://github.com/ElemeFE/element/issues/10018
simplifies internal implementation

* button: remove extra disabled check
---
 packages/button/src/button.vue | 13 ++++-------
 test/unit/specs/button.spec.js | 40 ++++++++++++++++++++++++++++++++++
 2 files changed, 44 insertions(+), 9 deletions(-)

diff --git a/packages/button/src/button.vue b/packages/button/src/button.vue
index 67fca4934..587aa184f 100644
--- a/packages/button/src/button.vue
+++ b/packages/button/src/button.vue
@@ -2,7 +2,7 @@
   <button
     class="el-button"
     @click="handleClick"
-    :disabled="disabled"
+    :disabled="disabled || loading"
     :autofocus="autofocus"
     :type="nativeType"
     :class="[
@@ -16,9 +16,9 @@
       }
     ]"
   >
-    <i class="el-icon-loading" v-if="loading" @click="handleInnerClick"></i>
-    <i :class="icon" v-if="icon && !loading" @click="handleInnerClick"></i>
-    <span v-if="$slots.default" @click="handleInnerClick"><slot></slot></span>
+    <i class="el-icon-loading" v-if="loading"></i>
+    <i :class="icon" v-if="icon && !loading"></i>
+    <span v-if="$slots.default"><slot></slot></span>
   </button>
 </template>
 <script>
@@ -64,11 +64,6 @@
     methods: {
       handleClick(evt) {
         this.$emit('click', evt);
-      },
-      handleInnerClick(evt) {
-        if (this.disabled) {
-          evt.stopPropagation();
-        }
       }
     }
   };
diff --git a/test/unit/specs/button.spec.js b/test/unit/specs/button.spec.js
index 0a6e89891..e34ac24d8 100644
--- a/test/unit/specs/button.spec.js
+++ b/test/unit/specs/button.spec.js
@@ -76,4 +76,44 @@ describe('Button', () => {
       done();
     }, 20);
   });
+
+  it('click inside', done => {
+    let result;
+    vm = createVue({
+      template: `
+        <el-button @click="handleClick"><span class="inner-slot"></span></el-button>
+      `,
+      methods: {
+        handleClick(evt) {
+          result = evt;
+        }
+      }
+    }, true);
+    vm.$el.querySelector('.inner-slot').click();
+
+    setTimeout(_ => {
+      expect(result).to.exist;
+      done();
+    }, 20);
+  });
+
+  it('loading implies disabled', done => {
+    let result;
+    vm = createVue({
+      template: `
+        <el-button loading @click="handleClick"><span class="inner-slot"></span></el-button>
+      `,
+      methods: {
+        handleClick(evt) {
+          result = evt;
+        }
+      }
+    }, true);
+    vm.$el.querySelector('.inner-slot').click();
+
+    setTimeout(_ => {
+      expect(result).to.not.exist;
+      done();
+    }, 20);
+  });
 });