open-index/open-npm huggingface dataset:
npm package: @ldesign/site-component
Description: LDesign 文档公共组件，基于hybrids的webcomponent组件，可用于vue,react等前端框架！
Author: ldesign
Latest version: 0.7.0

> 提示：推荐使用[https://www.npmjs.com/package/@ldesign/stencil-component]()，一个基于`stencil`的wencomponent的文档组件库。

基于`hybrids`的一套 webcomponent 组件库，用于跨多端的文档组件库，在`examples`中包含一套基于`vue2`的文档实现代码，安装之后可自行查看用法。

<p align="center" dir="ltr" style="display:flex;flex-direction:row;justify-content:center;">
  <img src="https://img.shields.io/npm/v/@ldesign/site-component?style=flat-square" alt="npm version" />
  <img src="https://img.shields.io/npm/dm/@ldesign/site-component.svg?style=flat-square&color=#4fc08d" alt="downloads" />
  <img src="https://img.badgesize.io/https:/unpkg.com/@ldesign/site-component/lib/ldesign.umd.js?label=gzip%20size&compression=gzip&color=&style=flat-square#4fc08d" alt="Gzip Size" />
</p>

源码请参阅`src`目录。

### 预览地址

[vue2桌面端文档](https://swimly.cn/desktop/)

[vue3桌面端文档](https://swimly.cn/desktop-next/)

[vue3移动端文档](https://swimly.cn/mobile-next)

### 使用示例

```js
<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>

```