54 lines
1.0 KiB
Vue
54 lines
1.0 KiB
Vue
|
<template>
|
||
|
|
<Component :is="tag" class="app-button" v-bind="attrs">
|
||
|
|
<slot />
|
||
|
|
</Component>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts" setup>
|
||
|
|
defineOptions({
|
||
|
|
name: 'AppButton',
|
||
|
|
})
|
||
|
|
|
||
|
|
const props = defineProps<{
|
||
|
|
href?: string
|
||
|
|
}>()
|
||
|
|
|
||
|
|
const isLink = computed(() => !!props.href)
|
||
|
|
const tag = computed(() => isLink.value ? 'a' : 'button')
|
||
|
|
const attrs = computed(() => {
|
||
|
|
if (isLink.value) {
|
||
|
|
return {
|
||
|
|
href: props.href,
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
return {
|
||
|
|
type: 'button',
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
.app-button {
|
||
|
|
display: inline-block;
|
||
|
|
text-decoration: none;
|
||
|
|
border: none;
|
||
|
|
border-radius: 8px;
|
||
|
|
padding: 8px 12px;
|
||
|
|
cursor: pointer;
|
||
|
|
background-image: linear-gradient(135deg, var(--beaver) 0%, var(--beaver) 51%, var(--walnut-brown) 110%);
|
||
|
|
background-size: 200% auto;
|
||
|
|
background-color: var(--walnut-brown);
|
||
|
|
background-repeat: repeat;
|
||
|
|
color: var(--white-smoke);
|
||
|
|
font-weight: 500;
|
||
|
|
transition: .15s ease-out;
|
||
|
|
transition-property: color, background-position;
|
||
|
|
|
||
|
|
&:hover:not(:active) {
|
||
|
|
background-position: right center;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|