Add "to" option for button

This commit is contained in:
kolaente 2021-01-17 15:42:18 +01:00
parent 1f71ab315e
commit 54ec4aa5ce
Signed by: konrad
GPG Key ID: F40E70337AB24C9B
1 changed files with 57 additions and 44 deletions

View File

@ -1,50 +1,63 @@
<template>
<a
class="button"
:class="{
'is-loading': loading,
'has-no-shadow': !shadow,
'is-primary': type === 'primary',
'is-outlined': type === 'secondary',
'is-text is-inverted has-no-shadow underline-none': type === 'tertary',
}"
:disabled="disabled"
@click="e => $emit('click', e)"
:href="href !== '' ? href : false"
>
<icon :icon="icon" v-if="icon !== ''"/>
<slot></slot>
</a>
<a
class="button"
:class="{
'is-loading': loading,
'has-no-shadow': !shadow,
'is-primary': type === 'primary',
'is-outlined': type === 'secondary',
'is-text is-inverted has-no-shadow underline-none':
type === 'tertary',
}"
:disabled="disabled"
@click="click"
:href="href !== '' ? href : false"
>
<icon :icon="icon" v-if="icon !== ''" />
<slot></slot>
</a>
</template>
<script>
export default {
name: 'x-button',
props: {
type: {
type: String,
default: 'primary',
},
href: {
type: String,
default: '',
},
icon: {
type: String,
default: '',
},
loading: {
type: Boolean,
default: false,
},
shadow: {
type: Boolean,
default: true,
},
disabled: {
type: Boolean,
default: false,
},
},
}
name: 'x-button',
props: {
type: {
type: String,
default: 'primary',
},
href: {
type: String,
default: '',
},
to: {
default: false,
},
icon: {
type: String,
default: '',
},
loading: {
type: Boolean,
default: false,
},
shadow: {
type: Boolean,
default: true,
},
disabled: {
type: Boolean,
default: false,
},
},
methods: {
click(e) {
if (this.to !== false) {
this.$router.push(this.to);
}
this.$emit('click', e);
},
},
};
</script>