提示：推荐使用https://www.npmjs.com/package/@ldesign/stencil-component，一个基于
stencil的wencomponent的文档组件库。
基于hybrids的一套 webcomponent 组件库，用于跨多端的文档组件库，在examples中包含一套基于vue2的文档实现代码，安装之后可自行查看用法。
源码请参阅src目录。
预览地址
使用示例
<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>