52 lines
1.0 KiB
Vue
52 lines
1.0 KiB
Vue
<template>
|
|
<a
|
|
href="#"
|
|
class="button"
|
|
:class="{ 'is-loading': loading }"
|
|
@click.prevent="click"
|
|
v-click-outside="resetTap"
|
|
>
|
|
<span v-show="confirmMessage">{{ confirmMessage }}</span>
|
|
<span v-show="!confirmMessage">
|
|
<slot></slot>
|
|
</span>
|
|
</a>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Component, Vue, Prop } from 'vue-property-decorator'
|
|
import ClickOutside from 'vue-click-outside'
|
|
|
|
@Component({
|
|
directives: {
|
|
ClickOutside
|
|
}
|
|
})
|
|
export default class ConfirmButton extends Vue {
|
|
public loading: boolean = false
|
|
public firstTap: boolean = true
|
|
public resetTap(): void {
|
|
this.firstTap = true
|
|
}
|
|
public click(): void {
|
|
if (this.loading) {
|
|
return
|
|
}
|
|
if (this.firstTap) {
|
|
this.firstTap = false
|
|
return
|
|
}
|
|
this.loading = true
|
|
this.firstTap = true
|
|
this.$emit('confirm', () => {
|
|
this.loading = false
|
|
})
|
|
}
|
|
|
|
public get confirmMessage(): string {
|
|
return this.firstTap ? '' : 'Confirmer pour valider'
|
|
}
|
|
}
|
|
</script>
|
|
|