需求，系统全部的按钮需要做防重复提交
方案：将el-button封装在dbButton中，在dbButton组件中去处理loading
<template>
<!-- 封装了 统一loading效果的按钮
使用方式：<dbButton type="primary" @click="(next) => saveUpdate(0, next)">保存</dbButton>
在saveUpdate方法的接口请求完成后，手动调用next() 即可取消loading状态
this.simplePost(api, params,(data) => {
next()
})
-->
<el-button
v-bind="$attrs"
@click="handleClick"
:loading='loading'>
<slot></slot>
</el-button>
</template>
<script>
export default {
name: 'dbButton',
data() {
return {
loading: false
}
},
methods:{
handleClick() {
this.loading = true
new Promise((resolve) => {
// 向父组件暴露一个resolve，用于父组件中调用 next()取消loading状态
this.$emit('click', resolve)
}).then(() => {
this.loading = false
})
}
}
}
</script>
v-bind="$attrs",将父组件的所有传入db-button的数据(未在dbBotton中被props接收使用的)，流入下一层el-button组件
