mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-14 01:11:25 +08:00
2caac7906e
* refactor(docs): adjust style details * refactor(docs): add toc width * refactor(docs): remove unused var * fix(docs): typography & button etc pages width unify
42 lines
1.1 KiB
Vue
42 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
import { useToc } from '../../composables/use-toc'
|
|
import { useActiveSidebarLinks } from '../../composables/active-bar'
|
|
|
|
import SponsorsButton from '../sponsors/sponsors-button.vue'
|
|
|
|
const headers = useToc()
|
|
const marker = ref()
|
|
const container = ref()
|
|
useActiveSidebarLinks(container, marker)
|
|
</script>
|
|
|
|
<template>
|
|
<aside ref="container" class="toc-wrapper">
|
|
<nav class="toc-content">
|
|
<h3 class="toc-content__heading">Contents</h3>
|
|
<ul class="toc-items">
|
|
<li
|
|
v-for="{ link, text, children } in headers"
|
|
:key="link"
|
|
class="toc-item"
|
|
>
|
|
<a class="toc-link" :href="link">{{ text }}</a>
|
|
<ul v-if="children">
|
|
<li
|
|
v-for="{ link: childLink, text: childText } in children"
|
|
:key="childLink"
|
|
class="toc-item"
|
|
>
|
|
<a class="toc-link subitem" :href="childLink">{{ childText }}</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
<div ref="marker" class="toc-marker" />
|
|
|
|
<sponsors-button class="mt-8" />
|
|
</nav>
|
|
</aside>
|
|
</template>
|