44 lines
1.4 KiB
JavaScript
44 lines
1.4 KiB
JavaScript
Vue.component('tt-button', {
|
|
//language=Vue
|
|
template: `
|
|
<component :is="href ? 'a' : 'button'"
|
|
:href="href"
|
|
:disabled="!href && loading"
|
|
:class="buttonClasses"
|
|
class="btn"
|
|
@click="handleClick">
|
|
<span v-if="loading" class="spinner"></span>
|
|
<template v-else>
|
|
<i v-if="icon" :class="icon"></i>
|
|
{{ text }}
|
|
</template>
|
|
</component>
|
|
`,
|
|
props: {
|
|
sm: {type: Boolean, default: false},
|
|
icon: {type: String, required: false},
|
|
text: {type: String, required: false},
|
|
href: {type: String, required: false},
|
|
additionalClass: {type: String, required: false},
|
|
confirmText: {type: String, required: false},
|
|
loading: {type: Boolean, default: false},
|
|
},
|
|
computed: {
|
|
buttonClasses() {
|
|
const classes = [];
|
|
if (this.sm) classes.push('btn-sm');
|
|
if (this.loading) classes.push('btn-loading');
|
|
if (this.additionalClass) classes.push(...this.additionalClass.split(' '));
|
|
return classes;
|
|
}
|
|
},
|
|
methods: {
|
|
handleClick(event) {
|
|
if (this.loading || (this.confirmText && !confirm(this.confirmText))) {
|
|
event.preventDefault();
|
|
return;
|
|
}
|
|
this.$emit('click', event);
|
|
}
|
|
}
|
|
}); |