♻️(document): 调整文档结构
This commit is contained in:
就眠儀式
611
package/document-component/src/document/zh-CN/components/menu.md
Normal file
611
package/document-component/src/document/zh-CN/components/menu.md
Normal file
@@ -0,0 +1,611 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基本介绍
|
||||
:::
|
||||
|
||||
::: describe 导航菜单是一个网站的灵魂，用户依赖导航在各个页面中进行跳转。
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-menu v-model:selectedKey="selectedKey" v-model:openKeys="openKeys1">
|
||||
<lay-menu-item id="1">首页</lay-menu-item>
|
||||
<lay-menu-item id="2">首页</lay-menu-item>
|
||||
<lay-menu-item id="3">首页</lay-menu-item>
|
||||
<lay-sub-menu id="7">
|
||||
<template #title>
|
||||
首页
|
||||
</template>
|
||||
<lay-menu-item id="8">首页</lay-menu-item>
|
||||
<lay-menu-item id="9">首页</lay-menu-item>
|
||||
<lay-sub-menu title="菜单" id="10">
|
||||
<template #title>
|
||||
首页
|
||||
</template>
|
||||
<lay-menu-item id="11">首页</lay-menu-item>
|
||||
<lay-menu-item id="12">首页</lay-menu-item>
|
||||
<lay-menu-item id="13">首页</lay-menu-item>
|
||||
</lay-sub-menu>
|
||||
</lay-sub-menu>
|
||||
</lay-menu>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const selectedKey = ref("5")
|
||||
const openKeys1 = ref(["7"])
|
||||
return {
|
||||
selectedKey,
|
||||
openKeys1
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 垂直导航
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-menu :selectedKey="selectedKey" @changeSelectedKey="changeSelectedKey" @changeOpenKeys="changeOpenKeys" v-model:openKeys="openKeys2" :tree="true">
|
||||
<lay-menu-item id="1">首页</lay-menu-item>
|
||||
<lay-menu-item id="2">首页</lay-menu-item>
|
||||
<lay-menu-item id="3">首页</lay-menu-item>
|
||||
<lay-sub-menu id="7">
|
||||
<template #title>
|
||||
首页
|
||||
</template>
|
||||
<lay-menu-item id="8">首页</lay-menu-item>
|
||||
<lay-menu-item id="9">首页</lay-menu-item>
|
||||
<lay-sub-menu title="菜单" id="10">
|
||||
<template #title>
|
||||
首页
|
||||
</template>
|
||||
<lay-menu-item id="11">首页</lay-menu-item>
|
||||
<lay-menu-item id="12">首页</lay-menu-item>
|
||||
<lay-menu-item id="13">首页</lay-menu-item>
|
||||
</lay-sub-menu>
|
||||
</lay-sub-menu>
|
||||
</lay-menu>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const openKeys2 = ref(["7"])
|
||||
const selectedKey = ref("5")
|
||||
const changeSelectedKey = (val) => {
|
||||
selectedKey.value = val;
|
||||
}
|
||||
|
||||
const changeOpenKeys = (val) => {
|
||||
openKeys2.value = val;
|
||||
}
|
||||
|
||||
return {
|
||||
openKeys2,
|
||||
selectedKey,
|
||||
changeOpenKeys,
|
||||
changeSelectedKey
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 反转样式
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-menu :level="isLevel" v-model:selectedKey="selectedKey" inverted="true" v-model:openKeys="openKeys3" :tree="true">
|
||||
<lay-menu-item id="1">首页</lay-menu-item>
|
||||
<lay-menu-item id="2">首页</lay-menu-item>
|
||||
<lay-menu-item id="3">首页</lay-menu-item>
|
||||
<lay-sub-menu id="7">
|
||||
<template #title>
|
||||
首页
|
||||
</template>
|
||||
<lay-menu-item id="8">首页</lay-menu-item>
|
||||
<lay-menu-item id="9">首页</lay-menu-item>
|
||||
<lay-sub-menu id="10">
|
||||
<template #title>
|
||||
首页
|
||||
</template>
|
||||
<lay-menu-item id="11">首页</lay-menu-item>
|
||||
<lay-menu-item id="12">首页</lay-menu-item>
|
||||
<lay-menu-item id="13">首页</lay-menu-item>
|
||||
</lay-sub-menu>
|
||||
</lay-sub-menu>
|
||||
</lay-menu>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const isLevel = ref(false);
|
||||
const openKeys3 = ref(["7"]);
|
||||
const selectedKey = ref("5");
|
||||
|
||||
return {
|
||||
isLevel,
|
||||
openKeys3,
|
||||
selectedKey
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 切换主题
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-menu v-model:selectedKey="selectedKey" theme="light" v-model:openKeys="openKeys4" :tree="true">
|
||||
<lay-menu-item id="1">
|
||||
<template #title>
|
||||
菜单
|
||||
</template>
|
||||
</lay-menu-item>
|
||||
<lay-menu-item id="2">
|
||||
<template #title>
|
||||
菜单
|
||||
</template>
|
||||
</lay-menu-item>
|
||||
<lay-menu-item id="3">
|
||||
<template #title>
|
||||
菜单
|
||||
</template>
|
||||
</lay-menu-item>
|
||||
<lay-sub-menu id="7">
|
||||
<template #title>
|
||||
目录
|
||||
</template>
|
||||
<lay-menu-item id="8">
|
||||
菜单
|
||||
</lay-menu-item>
|
||||
<lay-menu-item id="9">
|
||||
菜单
|
||||
</lay-menu-item>
|
||||
<lay-sub-menu title="菜单" id="10">
|
||||
<template #title>
|
||||
目录
|
||||
</template>
|
||||
<lay-menu-item id="11">
|
||||
菜单
|
||||
</lay-menu-item>
|
||||
<lay-menu-item id="12">
|
||||
菜单
|
||||
</lay-menu-item>
|
||||
<lay-menu-item id="13">
|
||||
菜单
|
||||
</lay-menu-item>
|
||||
</lay-sub-menu>
|
||||
</lay-sub-menu>
|
||||
</lay-menu>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const openKeys4 = ref(["7"])
|
||||
const selectedKey = ref("5")
|
||||
|
||||
return {
|
||||
openKeys4,
|
||||
selectedKey
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 菜单插槽
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-menu v-model:selectedKey="selectedKey" v-model:openKeys="openKeys5" v-model:tree="isTree">
|
||||
<lay-menu-item id="1">
|
||||
<router-link to="">
|
||||
<lay-icon type="layui-icon-home"></lay-icon>
|
||||
首页
|
||||
</router-link>
|
||||
</lay-menu-item>
|
||||
<lay-sub-menu id="7">
|
||||
<template v-slot:title>
|
||||
<router-link to="">
|
||||
<lay-icon type="layui-icon-home"></lay-icon>
|
||||
目录
|
||||
</router-link>
|
||||
</template>
|
||||
<lay-menu-item id="8">
|
||||
<router-link to="">
|
||||
<lay-icon type="layui-icon-home"></lay-icon>
|
||||
菜单
|
||||
</router-link>
|
||||
</lay-menu-item>
|
||||
<lay-menu-item id="9">
|
||||
<router-link to="">
|
||||
<lay-icon type="layui-icon-home"></lay-icon>
|
||||
菜单
|
||||
</router-link>
|
||||
</lay-menu-item>
|
||||
</lay-sub-menu>
|
||||
</lay-menu>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const isTree = ref(true)
|
||||
const selectedKey = ref("5")
|
||||
const openKeys5 = ref(["7"])
|
||||
|
||||
return {
|
||||
isTree,
|
||||
openKeys5,
|
||||
selectedKey
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 菜单折叠
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-switch v-model="collapse"></lay-switch>
|
||||
<br/>
|
||||
<br/>
|
||||
<lay-menu v-model:selectedKey="selectedKey" v-model:tree="isTree" v-model:openKeys="openKeys6" :collapse="collapse">
|
||||
<lay-menu-item id="1">
|
||||
<template #icon>
|
||||
<lay-icon type="layui-icon-home"></lay-icon>
|
||||
</template>
|
||||
<template #title>
|
||||
首页
|
||||
</template>
|
||||
</lay-menu-item>
|
||||
<lay-menu-item id="2">
|
||||
<template #icon>
|
||||
<lay-icon type="layui-icon-home"></lay-icon>
|
||||
</template>
|
||||
<template #title>
|
||||
首页
|
||||
</template>
|
||||
</lay-menu-item>
|
||||
<lay-menu-item id="3">
|
||||
<template #icon>
|
||||
<lay-icon type="layui-icon-home"></lay-icon>
|
||||
</template>
|
||||
<template #title>
|
||||
首页
|
||||
</template>
|
||||
</lay-menu-item>
|
||||
<lay-sub-menu title="目录" id="7">
|
||||
<template #icon>
|
||||
<lay-icon type="layui-icon-home"></lay-icon>
|
||||
</template>
|
||||
<template #title>
|
||||
首页
|
||||
</template>
|
||||
<lay-menu-item id="8">
|
||||
<template #icon>
|
||||
<lay-icon type="layui-icon-home"></lay-icon>
|
||||
</template>
|
||||
<template #title>
|
||||
首页
|
||||
</template>
|
||||
</lay-menu-item>
|
||||
<lay-menu-item id="9">
|
||||
<template #icon>
|
||||
<lay-icon type="layui-icon-home"></lay-icon>
|
||||
</template>
|
||||
<template #title>
|
||||
首页
|
||||
</template>
|
||||
</lay-menu-item>
|
||||
<lay-sub-menu id="10">
|
||||
<template #icon>
|
||||
<lay-icon type="layui-icon-home"></lay-icon>
|
||||
</template>
|
||||
<template #title>
|
||||
首页
|
||||
</template>
|
||||
<lay-menu-item id="11">
|
||||
<template #icon>
|
||||
<lay-icon type="layui-icon-home"></lay-icon>
|
||||
</template>
|
||||
<template #title>
|
||||
首页
|
||||
</template>
|
||||
</lay-menu-item>
|
||||
<lay-menu-item id="12">
|
||||
<template #icon>
|
||||
<lay-icon type="layui-icon-home"></lay-icon>
|
||||
</template>
|
||||
<template #title>
|
||||
首页
|
||||
</template>
|
||||
</lay-menu-item>
|
||||
<lay-sub-menu id="13">
|
||||
<template #icon>
|
||||
<lay-icon type="layui-icon-home"></lay-icon>
|
||||
</template>
|
||||
<template #title>
|
||||
首页
|
||||
</template>
|
||||
<lay-menu-item id="14">
|
||||
<template #icon>
|
||||
<lay-icon type="layui-icon-home"></lay-icon>
|
||||
</template>
|
||||
<template #title>
|
||||
首页
|
||||
</template>
|
||||
</lay-menu-item>
|
||||
<lay-menu-item id="15">
|
||||
<template #icon>
|
||||
<lay-icon type="layui-icon-home"></lay-icon>
|
||||
</template>
|
||||
<template #title>
|
||||
首页
|
||||
</template>
|
||||
</lay-menu-item>
|
||||
<lay-menu-item id="16">
|
||||
<template #icon>
|
||||
<lay-icon type="layui-icon-home"></lay-icon>
|
||||
</template>
|
||||
<template #title>
|
||||
首页
|
||||
</template>
|
||||
</lay-menu-item>
|
||||
</lay-sub-menu>
|
||||
</lay-sub-menu>
|
||||
</lay-sub-menu>
|
||||
</lay-menu>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const selectedKey = ref("5")
|
||||
const openKeys6 = ref(["7"])
|
||||
const collapse = ref(true)
|
||||
const isTree = ref(true)
|
||||
return {
|
||||
selectedKey,
|
||||
openKeys6,
|
||||
colapse,
|
||||
isTree
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 过渡动画
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-menu v-model:selectedKey="selectedKey" :collapse-transition="collapseTransition" v-model:openKeys="openKeys7" v-model:tree="isTree">
|
||||
<lay-menu-item id="1">
|
||||
<router-link to="">
|
||||
<lay-icon type="layui-icon-home"></lay-icon>
|
||||
首页
|
||||
</router-link>
|
||||
</lay-menu-item>
|
||||
<lay-sub-menu id="7">
|
||||
<template v-slot:title>
|
||||
<router-link to="">
|
||||
<lay-icon type="layui-icon-home"></lay-icon>
|
||||
目录
|
||||
</router-link>
|
||||
</template>
|
||||
<lay-menu-item id="8">
|
||||
<router-link to="">
|
||||
<lay-icon type="layui-icon-home"></lay-icon>
|
||||
菜单
|
||||
</router-link>
|
||||
</lay-menu-item>
|
||||
<lay-menu-item id="9">
|
||||
<router-link to="">
|
||||
<lay-icon type="layui-icon-home"></lay-icon>
|
||||
菜单
|
||||
</router-link>
|
||||
</lay-menu-item>
|
||||
</lay-sub-menu>
|
||||
</lay-menu>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const isTree = ref(true)
|
||||
const collapseTransition = ref(false);
|
||||
const selectedKey = ref("5")
|
||||
const openKeys7 = ref(["7"])
|
||||
|
||||
return {
|
||||
isTree,
|
||||
openKeys7,
|
||||
selectedKey,
|
||||
collapseTransition
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 扩展图标
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-menu v-model:selectedKey="selectedKey" v-model:openKeys="openKeys7" v-model:tree="isTree">
|
||||
<lay-menu-item id="1">
|
||||
<router-link to="">
|
||||
<lay-icon type="layui-icon-home"></lay-icon>
|
||||
首页
|
||||
</router-link>
|
||||
</lay-menu-item>
|
||||
<lay-sub-menu id="7">
|
||||
<template v-slot:title>
|
||||
<router-link to="">
|
||||
<lay-icon type="layui-icon-home"></lay-icon>
|
||||
目录
|
||||
</router-link>
|
||||
</template>
|
||||
<template v-slot:expandIcon={isExpand}>
|
||||
{{isExpand}}
|
||||
</template>
|
||||
<lay-menu-item id="8">
|
||||
<router-link to="">
|
||||
<lay-icon type="layui-icon-home"></lay-icon>
|
||||
菜单
|
||||
</router-link>
|
||||
</lay-menu-item>
|
||||
<lay-menu-item id="9">
|
||||
<router-link to="">
|
||||
<lay-icon type="layui-icon-home"></lay-icon>
|
||||
菜单
|
||||
</router-link>
|
||||
</lay-menu-item>
|
||||
</lay-sub-menu>
|
||||
</lay-menu>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const isTree = ref(true)
|
||||
const openKeys7 = ref(["7"])
|
||||
const selectedKey = ref("5")
|
||||
|
||||
return {
|
||||
isTree,
|
||||
openKeys7,
|
||||
selectedKey,
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title Menu 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 备注 |
|
||||
| ------------------- | -------------- | -------------- |
|
||||
| v-model:selectedKey | 选中项 | -- |
|
||||
| v-model:openKeys | 打开项 | -- |
|
||||
| theme | 菜单主题 | `dark` `light` |
|
||||
| inverted | 特殊的激活样式 | `true` `false` |
|
||||
| level | 菜单层级 | `true` `false` |
|
||||
| collapse | 折叠状态 | `true` `false` |
|
||||
| collapse-transition | 折叠动画 | `true` `false` |
|
||||
|
||||
:::
|
||||
|
||||
::: title Menu Item 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 插槽 | 描述 | 备注 |
|
||||
| ----- | -------- | ---- |
|
||||
| title | 菜单标题 | -- |
|
||||
|
||||
:::
|
||||
|
||||
::: title Menu Item 插槽
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 插槽 | 描述 | 备注 |
|
||||
| ----- | -------- | ---- |
|
||||
| title | 菜单标题 | -- |
|
||||
|
||||
:::
|
||||
|
||||
::: title Sub Menu 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 插槽 | 描述 | 备注 |
|
||||
| ----- | -------- | ---- |
|
||||
| title | 菜单标题 | -- |
|
||||
| expandIcon | 扩展图标 | -- |
|
||||
|
||||
:::
|
||||
|
||||
::: title Sub Menu 插槽
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 插槽 | 描述 | 备注 |
|
||||
| ----- | -------- | ---- |
|
||||
| title | 菜单标题 | -- |
|
||||
|
||||
:::
|
||||
|
||||
::: contributor menu
|
||||
:::
|
||||
|
||||
::: previousNext menu
|
||||
:::
|
||||
Reference in New Issue
Block a user