ts enum 使用示例

enum既可以作为值使用，也可以作为类型使用。

枚举的打印结果是一个对象

<template>
  <div class='box'>
    <div class="enum-demo">
      <h3>用户状态: {{ userStatusText }}</h3>

      <button @click="toggleUserStatus">切换用户状态</button>

      <div class="permission-list">
        <h3>权限等级展示：</h3>
        <div v-for="level in permissionLevels" :key="level">
          {{ getPermissionText(level) }}
        </div>
      </div>

      <div class="direction-demo">
        <h3>当前方向: {{ currentDirection }}</h3>
        <button @click="changeDirection">改变方向</button>
      </div>

      <div class="type-demo">
        <h3>Enum作为类型使用示例：</h3>
        <div>当前季节: {{ currentSeason }}</div>
        <button @click="updateSeason">更换季节</button>

        <div>当前主题: {{ theme }}</div>
        <button @click="switchTheme">切换主题</button>
      </div>
    </div>
  </div>
</template>

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

// 用户状态枚举
enum UserStatus {
  Active = 1,
  Inactive = 2,
  Blocked = 3
}

// 权限等级枚举
enum PermissionLevel {
  Guest = 'GUEST',
  User = 'USER',
  Admin = 'ADMIN',
  SuperAdmin = 'SUPER_ADMIN'
}

// 方向枚举（使用计算属性形式）
enum Direction {
  Up = '上',
  Down = '下',
  Left = '左',
  Right = '右'
}

// 新增枚举定义
enum Season {
  Spring = '春天',
  Summer = '夏天',
  Autumn = '秋天',
  Winter = '冬天'
}

enum Theme {
  Light = 'light',
  Dark = 'dark'
}

// 状态相关
const userStatus = ref<UserStatus>(UserStatus.Active);

const userStatusText = computed(() => {
  switch (userStatus.value) {
    case UserStatus.Active:
      return '活跃';
    case UserStatus.Inactive:
      return '未激活';
    case UserStatus.Blocked:
      return '已封禁';
    default:
      return '未知状态';
  }
});

const toggleUserStatus = () => {
  if (userStatus.value === UserStatus.Active) {
    userStatus.value = UserStatus.Inactive;
  } else if (userStatus.value === UserStatus.Inactive) {
    userStatus.value = UserStatus.Blocked;
  } else {
    userStatus.value = UserStatus.Active;
  }
};

// 权限相关
const permissionLevels = Object.values(PermissionLevel);

const getPermissionText = (level: PermissionLevel) => {
  const permissionMap = {
    [PermissionLevel.Guest]: '访客权限',
    [PermissionLevel.User]: '普通用户权限',
    [PermissionLevel.Admin]: '管理员权限',
    [PermissionLevel.SuperAdmin]: '超级管理员权限'
  };
  return `${level}: ${permissionMap[level]}`;
};

// 方向相关
const directions = Object.values(Direction);
const currentDirectionIndex = ref(0);

const currentDirection = computed(() => {
  return directions[currentDirectionIndex.value];
});

const changeDirection = () => {
  currentDirectionIndex.value = (currentDirectionIndex.value + 1) % directions.length;
};

// 1. enum 作为类型使用
let currentSeason: Season = Season.Spring;  // 这里 Season 作为类型使用
const updateSeason = () => {
  // 这里 Season 作为值使用
  const seasons = Object.values(Season);
  const currentIndex = seasons.indexOf(currentSeason);
  currentSeason = seasons[(currentIndex + 1) % seasons.length];
};

// 2. 函数参数中使用 enum 作为类型
function handleThemeChange(newTheme: Theme) {  // Theme 作为类型
  theme.value = newTheme;
}

// 3. 使用 enum 作为对象的属性类型
interface ThemeConfig {
  currentTheme: Theme;  // Theme 作为类型
  lastTheme?: Theme;    // Theme 作为可选类型
}

// 4. enum 作为值使用
const theme = ref<Theme>(Theme.Light);  // Theme.Light 作为值
const switchTheme = () => {
  // Theme 作为值来判断和赋值
  theme.value = theme.value === Theme.Light ? Theme.Dark : Theme.Light;
};

// 5. 类型断言中使用 enum
const validateTheme = (input: string): Theme => {
  if (Object.values(Theme).includes(input as Theme)) {
    return input as Theme;
  }
  return Theme.Light; // 默认值
};

// 6. 在泛型中使用 enum
function createEnumMap<T extends Theme>(theme: T): Record<string, boolean> {
  return {
    isLight: theme === Theme.Light,
    isDark: theme === Theme.Dark
  };
}
</script>

<style lang='scss' scoped>
.enum-demo {
  padding: 20px;

  button {
    margin: 10px 0;
    padding: 5px 10px;
  }

  .permission-list {
    margin: 20px 0;

    div {
      margin: 5px 0;
      padding: 5px;
      background-color: #f5f5f5;
    }
  }

  .direction-demo {
    margin-top: 20px;
  }
}

.type-demo {
  margin-top: 20px;
  padding: 10px;
  border-top: 1px solid #eee;

  button {
    margin: 5px 0;
  }
}
</style>