akkoma-fe/src/components/progress_button/progress_button.vue

39 lines
663 B
Vue
Raw Normal View History

2019-04-04 17:26:08 +00:00
<template>
2019-07-11 00:59:10 +00:00
<button
:disabled="progress || disabled"
@click="onClick"
>
2019-04-25 16:34:46 +00:00
<template v-if="progress && $slots.progress">
2019-04-04 17:26:08 +00:00
<slot name="progress" />
</template>
<template v-else>
<slot />
</template>
</button>
</template>
<script>
export default {
props: {
disabled: {
type: Boolean
},
2019-04-04 17:45:46 +00:00
click: { // click event handler. Must return a promise
2019-04-04 17:26:08 +00:00
type: Function,
default: () => Promise.resolve()
}
},
data () {
return {
progress: false
}
},
methods: {
onClick () {
this.progress = true
this.click().then(() => { this.progress = false })
}
}
}
</script>