vps-notify-nuxt/components/Button.vue

<script setup lang="ts">
const props = defineProps<{
  color?: "primary" | "info" | "warning" | "danger";
  size?: "sm" | "lg";
  href?: string;
  type?: "button" | "submit" | "reset";
}>();
const emit = defineEmits(["click"]);

const colorCss = computed(() => {
  switch (props.color) {
    case "primary":
      return "bg-blue-600 border-blue-700 text-white hover:bg-blue-700";
    case "info":
      return "bg-cyan-600 border-cyan-700 text-white hover:bg-cyan-700";
    case "warning":
      return "bg-orange-600 border-orange-700 text-white hover:bg-orange-700";
    case "danger":
      return "bg-red-600 border-red-700 text-white hover:bg-red-700";
    default:
      return "hover:bg-gray-100";
  }
});

const sizeCss = computed(() => {
  switch (props.size) {
    case "sm":
      return "px-1 py-0.5 text-sm";
    case "lg":
      return "px-4 py-2 text-lg";
    default:
      return "px-2 py-1 text-base";
  }
});
</script>

<template>
  <NuxtLink
    :to="href"
    :class="`border ${colorCss} ${sizeCss}`"
    @click="emit('click')"
    v-if="href"
    ><slot></slot
  ></NuxtLink>
  <button
    v-else
    :class="`border ${colorCss} ${sizeCss}`"
    @click="emit('click')"
  >
    <slot></slot>
  </button>
</template>