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