mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-14 09:20:51 +08:00
79 lines
2.4 KiB
Vue
79 lines
2.4 KiB
Vue
<script setup lang="ts">
|
|
import { computed, ref } from 'vue'
|
|
import MarkdownIt from 'markdown-it'
|
|
import { useToc } from '../../composables/use-toc'
|
|
import { useActiveSidebarLinks } from '../../composables/active-bar'
|
|
|
|
import sponsorLocale from '../../../i18n/component/sponsor.json'
|
|
import { useLang } from '../../composables/lang'
|
|
import SponsorsButton from '../sponsors/sponsors-button.vue'
|
|
import SponsorRightBigLogoList from '../sponsors/right-big-logo-list.vue'
|
|
import SponsorRightTextList from '../sponsors/right-richtext-list.vue'
|
|
import SponsorRightLogoSmallList from '../sponsors/right-logo-small-list.vue'
|
|
import tag from '../../../plugins/tag'
|
|
// import SponsorLarge from '../vp-sponsor-large.vue'
|
|
|
|
const localMd = MarkdownIt().use(tag)
|
|
const headers = useToc()
|
|
const marker = ref()
|
|
const container = ref()
|
|
useActiveSidebarLinks(container, marker)
|
|
const lang = useLang()
|
|
const sponsor = computed(() => sponsorLocale[lang.value])
|
|
</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"
|
|
:title="text"
|
|
v-html="localMd.render(text)"
|
|
/>
|
|
<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"
|
|
:title="text"
|
|
v-html="localMd.render(childText)"
|
|
/>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
<div ref="marker" class="toc-marker" />
|
|
<!-- <SponsorLarge
|
|
class="mt-8 toc-ads flex flex-col"
|
|
item-style="width: 180px; height: 55px;"
|
|
/> -->
|
|
<p class="text-14px font-300 color-$text-color-secondary">
|
|
{{ sponsor.sponsoredBy }}
|
|
</p>
|
|
<sponsors-button class="sponsors-button mt-4 w-100%" />
|
|
<sponsor-right-big-logo-list />
|
|
<sponsor-right-logo-small-list />
|
|
<sponsor-right-text-list />
|
|
</nav>
|
|
</aside>
|
|
</template>
|
|
<style scoped lang="scss">
|
|
.sponsors-button:deep {
|
|
button {
|
|
width: 100%;
|
|
}
|
|
}
|
|
</style>
|