forked from NdoleStudio/httpsms
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathLoadingButton.vue
More file actions
56 lines (52 loc) · 1.63 KB
/
LoadingButton.vue
File metadata and controls
56 lines (52 loc) · 1.63 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<template>
<v-btn
:block="block"
:type="type"
:small="small"
:large="large"
:x-large="xLarge"
:color="color"
:text="text"
:tile="tile"
exact
:disabled="isLoading"
@click.prevent="onClick"
>
<v-progress-circular
v-if="isClicked"
:size="small ? 20 : 25"
color="grey"
class="mr-2"
indeterminate
></v-progress-circular>
<v-icon v-if="icon && !isLoading" left>{{ icon }}</v-icon>
<slot></slot>
</v-btn>
</template>
<script lang="ts">
import { Component, PropSync, Prop, Vue, Watch } from 'vue-property-decorator'
@Component
export default class SocialButtons extends Vue {
@Prop({ required: false, type: String, default: 'submit' }) type!: string
@Prop({ required: false, type: Boolean, default: false }) block!: boolean
@Prop({ required: false, type: Boolean, default: false }) large!: boolean
@Prop({ required: false, type: Boolean, default: false }) xLarge!: boolean
@Prop({ required: false, type: Boolean, default: false }) tile!: boolean
@Prop({ required: false, type: Boolean, default: false }) text!: boolean
@Prop({ required: false, type: Boolean, default: false }) small!: boolean
@Prop({ required: false, type: String, default: 'primary' }) color!: string
@Prop({ required: false, type: String, default: null }) icon!: string | null
@PropSync('loading', { required: true, type: Boolean }) isLoading!: boolean
isClicked = false
@Watch('loading')
onChildChanged(submitting: boolean) {
if (!submitting && this.isClicked) {
this.isClicked = false
}
}
onClick() {
this.isClicked = true
this.$emit('click')
}
}
</script>