feat(pages): add chapter picker dropdown to story pages
This commit is contained in:
parent
3b7eb4822e
commit
9ecb93d85d
33
components/story/view/chapterPicker.vue
Normal file
33
components/story/view/chapterPicker.vue
Normal file
@ -0,0 +1,33 @@
|
|||||||
|
<script lang="ts" setup>
|
||||||
|
import { LabeledValue } from "ant-design-vue/es/select";
|
||||||
|
import { SingleChapterResult } from "~/lib/client/types/slightlyDifferentStory";
|
||||||
|
|
||||||
|
const { params } = useRoute();
|
||||||
|
const cidx = parseInt(params.cidx as string);
|
||||||
|
const story = inject<SingleChapterResult | null>("story")!;
|
||||||
|
const opts = ref<LabeledValue[]>(
|
||||||
|
story!.chapterNames.map(
|
||||||
|
(s, i) =>
|
||||||
|
({
|
||||||
|
label: s,
|
||||||
|
value: i + 1,
|
||||||
|
}) as LabeledValue,
|
||||||
|
),
|
||||||
|
);
|
||||||
|
const onChange = (v) => {
|
||||||
|
console.log("SELECT", v);
|
||||||
|
navigateTo(`/story/${story._id}/${v as LabeledValue}`);
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div style="display: flow-root">
|
||||||
|
<a-select :value="opts[cidx - 1]" @select="onChange" :options="opts" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.ant-select {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
Loading…
x
Reference in New Issue
Block a user