[文档] 调整目录样式

This commit is contained in:
就眠仪式 2021-09-29 23:42:53 +08:00
parent 72474af51d
commit 6e996cd3f0
13 changed files with 127 additions and 40 deletions

View File

@ -1,23 +1,12 @@
::: demo
<template>
```html
<lay-layout>
<lay-header></lay-header>
<lay-header>
<lay-logo>Layui Admin</lay-logo>
</lay-header>
<lay-side></lay-side>
<lay-body></lay-body>
<lay-body>
<router-view></router-view>
</lay-body>
<lay-footer>pearadmin.com</lay-footer>
</lay-layout>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
return {
}
}
}
</script>
:::
```

View File

@ -0,0 +1,23 @@
::: demo
<template>
<lay-menu>
<lay-menu-item title="首页"></lay-menu-item>
<lay-menu-item title="用户"></lay-menu-item>
<lay-menu-item title="角色"></lay-menu-item>
</lay-menu>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
return {
}
}
}
</script>
:::

View File

@ -0,0 +1,3 @@
基于 layui 的 vue-next 组件库
a component library for Vue 3 base on layui-vue

View File

@ -16,24 +16,25 @@
</lay-header>
<lay-side>
<ul class="layui-menu layui-menu-lg">
<li><router-link to="/zh-CN/guide">介绍</router-link></li>
<li><router-link to="/zh-CN/guide/install">安装</router-link></li>
<li><router-link to="/zh-CN/components/layout">布局</router-link></li>
<li><router-link to="/zh-CN/components/container">容器</router-link></li>
<li><router-link to="/zh-CN/components/button">按钮</router-link></li>
<li><router-link to="/zh-CN/components/icon">图标</router-link></li>
<li><router-link to="/zh-CN/components/panel">面板</router-link></li>
<li><router-link to="/zh-CN/components/card">卡片</router-link></li>
<li><router-link to="/zh-CN/components/grid">栅格</router-link></li>
<li><router-link to="/zh-CN/components/form">表单</router-link></li>
<li><router-link to="/zh-CN/components/badge">徽章</router-link></li>
<li><router-link to="/zh-CN/components/block">区块</router-link></li>
<li><router-link to="/zh-CN/components/line">分割</router-link></li>
<li><div class="layui-menu-body-title"><router-link to="/zh-CN/guide">介绍</router-link></div></li>
<li><div class="layui-menu-body-title"><router-link to="/zh-CN/guide/install">安装</router-link></div></li>
<li><div class="layui-menu-body-title"><router-link to="/zh-CN/components/layout">布局</router-link></div></li>
<li><div class="layui-menu-body-title"><router-link to="/zh-CN/components/container">容器</router-link></div></li>
<li><div class="layui-menu-body-title"><router-link to="/zh-CN/components/button">按钮</router-link></div></li>
<li><div class="layui-menu-body-title"><router-link to="/zh-CN/components/icon">图标</router-link></div></li>
<li><div class="layui-menu-body-title"><router-link to="/zh-CN/components/panel">面板</router-link></div></li>
<li><div class="layui-menu-body-title"><router-link to="/zh-CN/components/card">卡片</router-link></div></li>
<li><div class="layui-menu-body-title"><router-link to="/zh-CN/components/grid">栅格</router-link></div></li>
<li><div class="layui-menu-body-title"><router-link to="/zh-CN/components/form">表单</router-link></div></li>
<li><div class="layui-menu-body-title"><router-link to="/zh-CN/components/badge">徽章</router-link></div></li>
<li><div class="layui-menu-body-title"><router-link to="/zh-CN/components/block">区块</router-link></div></li>
<li><div class="layui-menu-body-title"><router-link to="/zh-CN/components/line">分割</router-link></div></li>
<li><div class="layui-menu-body-title"><router-link to="/zh-CN/components/menu">菜单</router-link></div></li>
<li>
<router-link to="/zh-CN/components/progress">进度</router-link>
<div class="layui-menu-body-title"><router-link to="/zh-CN/components/progress">进度</router-link></div>
</li>
<li>
<router-link to="/zh-CN/components/timeline">时间</router-link>
<div class="layui-menu-body-title"><router-link to="/zh-CN/components/timeline">时间</router-link></div>
</li>
</ul>
</lay-side>

View File

@ -79,6 +79,11 @@ const zhCN = [
component: () => import('../../docs/zh-CN/components/progress.md'),
meta: { title: '进度' },
},
{
path: '/zh-CN/components/menu',
component: () => import('../../docs/zh-CN/components/menu.md'),
meta: { title: '菜单' },
},
{
path: '/zh-CN/components/timeline',
component: () => import('../../docs/zh-CN/components/timeline.md'),

View File

@ -1,6 +1,6 @@
{
"name": "@layui/layui-vue",
"version": "0.0.3",
"version": "0.0.4",
"description": "a component library for Vue 3 base on layui-vue",
"main": "lib/layui-vue.umd.js",
"module": "lib/layui-vue.es.js",

View File

@ -29,6 +29,9 @@ import LayTextarea from "./module/textarea/index"
import LaySwitch from "./module/switch/index"
import LayCollapse from "./module/collapse/index"
import LayContainer from "./module/container/index"
import LayMenu from './module/menu/index'
import LayMenuItem from './module/menuItem/index'
import LayMenuChildItem from './module/menuChildItem/index'
const components: Record<string, IDefineComponent> = {
LayRadio,
@ -56,7 +59,10 @@ const components: Record<string, IDefineComponent> = {
LayTextarea,
LaySwitch,
LayCollapse,
LayContainer
LayContainer,
LayMenu,
LayMenuItem,
LayMenuChildItem
}
const install = (app: App, options?: InstallOptions): void => {
@ -96,6 +102,9 @@ export {
LaySwitch,
LayCollapse,
LayContainer,
LayMenu,
LayMenuItem,
LayMenuChildItem,
install,
}

9
src/module/menu/index.ts Normal file
View File

@ -0,0 +1,9 @@
import type { App } from 'vue'
import Component from './index.vue'
import type { IDefineComponent } from '../type/index'
Component.install = (app: App) => {
app.component(Component.name || 'LayMenu', Component)
}
export default Component as IDefineComponent

View File

@ -0,0 +1,9 @@
<template>
<ul class="layui-nav layui-nav-tree">
<slot></slot>
</ul>
</template>
<script setup name="LayMenu" lang="ts">
</script>

View File

@ -0,0 +1,9 @@
import type { App } from 'vue'
import Component from './index.vue'
import type { IDefineComponent } from '../type/index'
Component.install = (app: App) => {
app.component(Component.name || 'LayMenuChildItem', Component)
}
export default Component as IDefineComponent

View File

@ -0,0 +1,7 @@
<template>
<dd><a href="">选项</a></dd>
</template>
<script setup name="LayMenuChildItem" lang="ts">
</script>

View File

@ -0,0 +1,9 @@
import type { App } from 'vue'
import Component from './index.vue'
import type { IDefineComponent } from '../type/index'
Component.install = (app: App) => {
app.component(Component.name || 'LayMenuItem', Component)
}
export default Component as IDefineComponent

View File

@ -0,0 +1,14 @@
<template>
<li class="layui-nav-item">
<a href="">{{title}}</a>
</li>
</template>
<script setup name="LayMenuItem" lang="ts">
import { defineProps } from 'vue'
const props =
defineProps<{
title: string
}>()
</script>