@ldesign/stencil-component

基于stencil的webcomponent，替代 https://www.npmjs.com/package/@ldesign/site-component。

组件列表

ldesign-page

ldesign-header

ldesign-banner

ldesign-backtop

ldesign-logo

ldesign-menu

ldesign-popup

ldesign-select

ldesign-switch

ldesign-tabs

ldesign-theme

ldesign-toc

vue3

支持在vue3项目中直接使用，在main.ts中全局引入

import {applyPolyfills, defineCustomElements} from '@ldesign/stencil-component/loader'

applyPolyfills().then(() => {
  defineCustomElements(window)
})

App.vue

<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>