Files
vue-ts-example/src/pages/ts-enum-util.vue
严浩 4d2236a06c
All checks were successful
CI / cache-and-install (push) Successful in 1m8s
chore: Add TS Enum Util page and update index-page.vue
2024-08-14 10:36:12 +08:00

58 lines
1.4 KiB
Vue

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