提示：推荐使用https://www.npmjs.com/package/@ldesign/stencil-component，一个基于stencil的wencomponent的文档组件库。

基于hybrids的一套 webcomponent 组件库，用于跨多端的文档组件库，在examples中包含一套基于vue2的文档实现代码，安装之后可自行查看用法。

源码请参阅src目录。

预览地址

vue2桌面端文档

vue3桌面端文档

vue3移动端文档

使用示例

<script lang="ts">
import { computed, defineComponent, onMounted, ref } from '@vue/composition-api'
import { docs } from '../../site.config'

export default defineComponent({
  setup(_props, ctx) {
    const loaded = ref(false)
    const header = ref<any>(null)
    const aside = ref<any>(null)

    const contentStyle = computed(() => ({
      visibility: loaded.value ? 'visible' : 'hidden',
    }))

    const contentLoaded = (callback: () => void) => {
      requestAnimationFrame(() => {
        loaded.value = true
        callback()
      })
    }

    onMounted(() => {
      header.value.framework = 'vue'
      aside.value.routerList = docs

      aside.value.onchange = ({ detail }: any) => {
        if (ctx.root.$route.path !== detail) {
          loaded.value = false
          ctx.root.$router.push(detail)
          window.scrollTo(0, 0)
        }
      }
    })

    return {
      loaded,
      header,
      aside,
      contentStyle,
      contentLoaded,
    }
  },
})
</script>

<template>
  <ldesign-page>
    <ldesign-header
      slot="header"
      ref="header"
    />
    <ldesign-aside
      ref="aside"
      title="Vue2 for Desktop"
    />
    <router-view
      :style="contentStyle"
      @loaded="contentLoaded"
    />
  </ldesign-page>
</template>