W250913/20.vue3/project4/src/components/Child.vue

<template>
  <div>
    <button :class="btnClass">{{ text }}</button>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, computed } from "vue";

const props = defineProps({
  size: {
    type: String as () => "sm" | "md" | "bi",
    default: "md",
  },
  color: {
    type: String as () => "small" | "middle" | "big",
    default: "middle",
  },
  text: String,
});
const btnClass = computed(() => {
  const sizeMap = {
    sm: "px-3 py-1 text-sm",
    md: "px-5 py-2 text-xs",
    bi: "px-7 py-3 text-lg",
  };
  const colorMap = {
    small: "bg-red-300 hover:bg-red-600",
    middle: "bg-blue-300 hover:bg-blue-600",
    big: "bg-green-300 hover:bg-green-600",
  };
  return [
    "rounded-lg text-white transition-all duration-300 active:scale-95",
    sizeMap[props.size],
    colorMap[props.color],
  ];
});
</script>

<style lang="scss" scoped>
</style>