前端Vue组件开发中枚举值验证的最佳实践

import { defineProps } from 'vue'
// 定义枚举（推荐导出，便于父组件复用）
export const ButtonSize = {
  SMALL: 'small',
  MEDIUM: 'medium',
  LARGE: 'large'
} as const
export type ButtonSizeType = typeof ButtonSize[keyof typeof ButtonSize]
// 或使用 TypeScript 联合类型（更简洁）
export type StatusType = 'success' | 'warning' | 'error' | 'info'
const props = defineProps({
  size: {
    type: String as PropType<ButtonSizeType>,
    default: ButtonSize.MEDIUM,
    validator: (value: string): boolean => {
      return Object.values(ButtonSize).includes(value as ButtonSizeType)
      // 或者： return ['small', 'medium', 'large'].includes(value)
    }
  },
  status: {
    type: String as PropType<StatusType>,
    validator: (value): value is StatusType => {
      return ['success', 'warning', 'error', 'info'].includes(value)
    }
  }
})

<script setup lang="ts">
import type { PropType } from 'vue'

const props = withDefaults(
  defineProps<{
    size?: 'small' | 'medium' | 'large'   // 联合类型 = 枚举
    theme?: 'primary' | 'secondary' | 'ghost'
    mode: 'light' | 'dark'                 // 必填（无 ?）
  }>(),
  {
    size: 'medium',
    theme: 'primary'
  }
)

// 如果需要更强的运行时 validator，仍可混合使用对象形式
</script>

// enums/button.ts
export const ButtonVariant = {
  PRIMARY: 'primary',
  SECONDARY: 'secondary',
  OUTLINE: 'outline',
  TEXT: 'text'
} as const

export type ButtonVariantType = typeof ButtonVariant[keyof typeof ButtonVariant]

// 使用
import { ButtonVariant, type ButtonVariantType } from '@/enums/button'

defineProps({
  variant: {
    type: String as PropType<ButtonVariantType>,
    default: ButtonVariant.PRIMARY,
    validator: (val: string) => Object.values(ButtonVariant).includes(val as ButtonVariantType)
  }
})

status: {
  type: [String, Number],
  validator(value) {
    if (typeof value === 'string') return ['success', 'error'].includes(value)
    if (typeof value === 'number') return value >= 0 && value <= 3
    return false
  }
}

expect(props.validator('invalid')).toBe(false)