Files
vue-ts-example/src/pages/Tool/ts-enum-util.page.vue
严浩 4542944f52
Some checks failed
/ depcheck (push) Successful in 2m24s
/ lint-build-and-check (push) Successful in 2m36s
/ build-and-deploy-to-vercel (push) Successful in 3m13s
/ surge (push) Successful in 2m40s
/ playwright (push) Failing after 8m16s
整理
2025-03-10 13:15:38 +08:00

59 lines
1.5 KiB
Vue

<script setup lang="ts">
import { $enum } from 'ts-enum-util';
enum Direction {
Down = 'DOWN',
Left = 'LEFT',
Right = 'RIGHT',
Up = 'UP',
}
enum TestEnum {
A,
B,
}
const visitValue = (value: Direction | null | undefined) => {
$enum.visitValue(value).with({
[$enum.handleNull]: () => {},
[$enum.handleUndefined]: () => {},
[$enum.handleUnexpected]: () => {},
[Direction.Down]: () => {},
[Direction.Left]: () => {},
[Direction.Right]: () => {},
[Direction.Up]: () => {},
});
};
const mapValue = (value: Direction | null | undefined) => {
return $enum.mapValue(value).with({
[$enum.handleNull]: 'Null',
[$enum.handleUndefined]: 'Undefined',
[$enum.handleUnexpected]: 'Unexpected',
[Direction.Down]: 'Down',
[Direction.Left]: 'Left',
[Direction.Right]: 'Right',
[Direction.Up]: 'Up',
});
};
</script>
<template>
<h1>TS Enum Util</h1>
<div flex="~ row">
<button class="green" @click="$router.back()">Back</button>
</div>
<main>
<p>TestEnum: {{ TestEnum }}</p>
<p>Direction: {{ Direction }}</p>
<ul list-circle>
<li>{{ `.getKeys(): ${$enum(Direction).getKeys()}` }}</li>
<li>{{ `.getValues(): ${$enum(Direction).getValues()}` }}</li>
<li><button class="green" @click="visitValue(Direction.Up)">Visit Value</button></li>
<li>{{ `.mapValue(null): ${mapValue(null)}` }}</li>
<li>getKeyOrDefault</li>
<li>getValueOrDefault</li>
</ul>
</main>
</template>