Auto_Bangumi/src/basic/ab-button.vue

<script lang="ts" setup>
const props = withDefaults(
  defineProps<{
    type?: 'primary' | 'warn';
    size?: 'big' | 'normal' | 'small';
    link?: string | null;
  }>(),
  {
    type: 'primary',
    size: 'normal',
    link: null,
  }
);

defineEmits(['click']);

const buttonSize = computed(() => {
  switch (props.size) {
    case 'big':
      return 'rounded-10px text-h1 w-276px h-55px';
    case 'normal':
      return 'rounded-6px w-170px h-36px';
    case 'small':
      return 'rounded-6px w-86px h-28px';
  }
});
</script>

<template>
  <Component
    :is="link !== null ? 'a' : 'button'"
    :href="link"
    text-white
    outline-none
    f-cer
    :class="[`type-${type}`, buttonSize]"
    @click="$emit('click')"
  >
    <slot></slot>
  </Component>
</template>

<style lang="scss" scoped>
.type {
  &-primary {
    @include bg-mouse-event(#4e3c94, #281e52, #8e8a9c);
  }

  &-warn {
    @include bg-mouse-event(#943c61, #521e2a, #9c8a93);
  }
}

.size {
  &-normal {
    border-radius: 6px;
    width: 171px;
    height: 36px;
  }

  &-big {
    font-size: 24px;
    border-radius: 10px;
    width: 276px;
    height: 55px;
  }

  &-small {
    font-size: 12px;
    border-radius: 6px;
    width: 86px;
    height: 28px;
  }
}
</style>