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

View File

@ -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);
});
});