Pārlūkot izejas kodu

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
Jiewei Qian 7 gadi atpakaļ
vecāks
revīzija
fd8648a4b3
2 mainītis faili ar 44 papildinājumiem un 9 dzēšanām
  1. 4 9
      packages/button/src/button.vue
  2. 40 0
      test/unit/specs/button.spec.js

+ 4 - 9
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();
-        }
       }
     }
   };

+ 40 - 0
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);
+  });
 });