vue实现小说目录
Vue 实现小说目录功能
数据准备
小说目录通常是一个列表结构，可以通过数组形式存储章节信息。数据格式示例：
chapters: [
{ id: 1, title: "第一章 重生", content: "..." },
{ id: 2, title: "第二章 系统", content: "..." },
// 更多章节...
]目录列表渲染
使用 v-for 指令渲染目录列表，建议使用 <router-link> 实现章节跳转：
<ul class="chapter-list">
<li v-for="chapter in chapters" :key="chapter.id">
<router-link
:to="{ path: '/chapter', query: { id: chapter.id } }"
@click="loadChapter(chapter.id)"
>
{{ chapter.title }}
</router-link>
</li>
</ul>样式优化
为目录添加基础样式，增强可读性和交互性：
.chapter-list {
padding: 0;
list-style: none;
}
.chapter-list li {
padding: 8px 12px;
border-bottom: 1px solid #eee;
}
.chapter-list a {
color: #333;
text-decoration: none;
}
.chapter-list a:hover {
color: #42b983;
}章节内容加载
通过点击事件或路由参数加载对应章节内容：
methods: {
loadChapter(id) {
const chapter = this.chapters.find(c => c.id === id);
this.currentChapter = chapter;
// 或通过API请求获取内容
}
}路由配置
配置 Vue Router 支持章节路由：
const routes = [
{
path: '/chapter',
component: ChapterView,
props: route => ({ id: route.query.id })
}
]进阶功能
- 添加折叠/展开功能管理多卷小说
- 实现阅读进度标记
- 增加搜索功能快速定位章节
- 使用虚拟滚动优化长列表性能
完整组件示例
<template>
<div class="novel-container">
<div class="sidebar">
<h3>目录</h3>
<ul class="chapter-list">
<li v-for="chapter in chapters" :key="chapter.id">
<a
href="#"
@click.prevent="loadChapter(chapter.id)"
:class="{ active: currentChapter?.id === chapter.id }"
>
{{ chapter.title }}
</a>
</li>
</ul>
</div>
<div class="content">
<h2>{{ currentChapter?.title }}</h2>
<p v-html="currentChapter?.content"></p>
</div>
</div>
</template>
