open-index/open-npm huggingface dataset:
npm package: @ldesign/stencil-component
Description: 一个基于stencil3的文档组件库
Latest version: 0.0.6

## @ldesign/stencil-component

基于`stencil`的webcomponent，替代 [https://www.npmjs.com/package/@ldesign/site-component](https://www.npmjs.com/package/@ldesign/site-component)。

### 组件列表

[ldesign-page](src/components/ldesign-page/readme.md)

[ldesign-header](src/components/ldesign-header/readme.md)

[ldesign-banner](src/components/ldesign-banner/readme.md)

[ldesign-backtop](src/components/ldesign-backtop/readme.md)

[ldesign-logo](src/components/ldesign-logo/readme.md)

[ldesign-menu](src/components/ldesign-menu/readme.md)

[ldesign-popup](src/components/ldesign-popup/readme.md)

[ldesign-select](src/components/ldesign-select/readme.md)

[ldesign-switch](src/components/ldesign-switch/readme.md)

[ldesign-tabs](src/components/ldesign-tabs/readme.md)

[ldesign-theme](src/components/ldesign-theme/readme.md)

[ldesign-toc](src/components/ldesign-toc/readme.md)

### vue3

支持在vue3项目中直接使用，在`main.ts`中全局引入

``` javascript
import {applyPolyfills, defineCustomElements} from '@ldesign/stencil-component/loader'

applyPolyfills().then(() => {
  defineCustomElements(window)
})
```

App.vue

``` javascript
<script lang="ts">
import { defineComponent, onMounted, Ref, ref, watch } from 'vue';
import {useRouter, useRoute} from 'vue-router'
import {useBaseStore} from '../store'
import logo from '@/assets/logo.svg?raw'

export interface MenuItemProps {
  name: string;
  title: string;
  path: string;
  meta: Record<string, any>;
}

export default defineComponent({
  setup() {
    const $router = useRouter()
    const $route = useRoute()
    const {_menus} = useBaseStore()
    const menus = ref<any>(_menus)
    const page = ref<HTMLElement | null>(null) as Ref<any>

    onMounted(() => {
      page.value.menus = menus.value
      page.value.fullPath = $route.fullPath
      page.value.title = 'LDesign文档'
      page.value.logo = logo
      page.value.addEventListener('onclick', (e: any) => {
        const {detail} = e
        $router.push(detail.path)
      })
    })

    watch(() => $route.fullPath, (v) => {
      page.value.fullPath = $route.fullPath
    })

    return {
      menus,
      page
    }
  }
})
</script>

<template>
  <ldesign-page ref="page">
    <router-view></router-view>
  </ldesign-page>
</template>

<style lang="less">
html,body {
  margin: 0;
}
</style>

```