outline组件
时间: 2023-07-31 18:03:56 浏览: 58
`Outline` 组件通常被用于网页的导航栏或者文章的目录中,用来展示网页或文章的大纲结构。下面是一个简单的 `Outline` 组件的实现示例:
```vue
<template>
<div>
<h2>{{ title }}</h2>
<ul>
<li v-for="item in items" :key="item.id">
<a :href="item.href">{{ item.title }}</a>
<ul v-if="item.children.length > 0">
<outline :items="item.children" />
</ul>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'Outline',
props: {
title: String,
items: Array
}
}
</script>
```
上面的代码中,我们定义了一个 `Outline` 组件,该组件接受两个 `props`: `title` 和 `items`。 `title` 用于展示当前大纲的标题, `items` 是一个数组,表示当前大纲的条目列表。
在组件的模板中,我们使用了一个 `h2` 标签来展示大纲标题,然后使用一个 `ul` 标签来展示大纲条目列表。对于每个条目,我们使用一个 `li` 标签来展示它,使用一个 `a` 标签来展示条目的标题,并且使用 `href` 属性将其链接到相应的位置。如果当前条目下还有子条目,我们将递归地渲染一个新的 `Outline` 组件来展示它们。
使用 `Outline` 组件时,我们只需要传递一个包含所有条目的数组即可,例如:
```vue
<template>
<div>
<outline :title="title" :items="items" />
</div>
</template>
<script>
import Outline from './Outline.vue'
const items = [
{
id: 1,
title: '第一章',
href: '#chapter-1',
children: [
{
id: 2,
title: '第一节',
href: '#section-1-1',
children: []
},
{
id: 3,
title: '第二节',
href: '#section-1-2',
children: []
}
]
},
{
id: 4,
title: '第二章',
href: '#chapter-2',
children: [
{
id: 5,
title: '第一节',
href: '#section-2-1',
children: []
},
{
id: 6,
title: '第二节',
href: '#section-2-2',
children: []
}
]
}
]
export default {
components: {
Outline
},
data() {
return {
title: '文章大纲',
items: items
}
}
}
</script>
```
在上面的代码中,我们将 `Outline` 组件作为了根组件,并传递了一个包含所有条目的数组给它。每个条目都有一个唯一的 `id`,一个标题 `title`,一个链接 `href` 和一个子条目列表 `children`。