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
pull/10034/head
Jiewei Qian 2018-03-06 18:53:06 +11:00 committed by 杨奕
parent 737ef71262
commit fd8648a4b3
2 changed files with 44 additions and 9 deletions

View File

@ -2,7 +2,7 @@
<button <button
class="el-button" class="el-button"
@click="handleClick" @click="handleClick"
:disabled="disabled" :disabled="disabled || loading"
:autofocus="autofocus" :autofocus="autofocus"
:type="nativeType" :type="nativeType"
:class="[ :class="[
@ -16,9 +16,9 @@
} }
]" ]"
> >
<i class="el-icon-loading" v-if="loading" @click="handleInnerClick"></i> <i class="el-icon-loading" v-if="loading"></i>
<i :class="icon" v-if="icon && !loading" @click="handleInnerClick"></i> <i :class="icon" v-if="icon && !loading"></i>
<span v-if="$slots.default" @click="handleInnerClick"><slot></slot></span> <span v-if="$slots.default"><slot></slot></span>
</button> </button>
</template> </template>
<script> <script>
@ -64,11 +64,6 @@
methods: { methods: {
handleClick(evt) { handleClick(evt) {
this.$emit('click', evt); this.$emit('click', evt);
},
handleInnerClick(evt) {
if (this.disabled) {
evt.stopPropagation();
}
} }
} }
}; };

View File

@ -76,4 +76,44 @@ describe('Button', () => {
done(); done();
}, 20); }, 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);
});
}); });