theluyuan/layui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

新增 menu 组件 level 层级

Browse Source
This commit is contained in:
就眠儀式 2022-01-30 21:50:38 +08:00
parent c7ebbe733a
commit 5fe02df5db
3 changed files with 38 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
example/docs/zh-CN/components/menu.md
View File

@ -12,12 +12,12 @@
<lay-menu-item title="用户" id="2"></lay-menu-item> <lay-menu-item title="用户" id="2"></lay-menu-item>
<lay-menu-item title="角色" id="3"></lay-menu-item> <lay-menu-item title="角色" id="3"></lay-menu-item>
<lay-sub-menu title="目录" id="7"> <lay-sub-menu title="目录" id="7">
<lay-menu-item title="菜单一" id="8"></lay-menu-item> <lay-menu-item title="菜单" id="8"></lay-menu-item>
<lay-menu-item title="菜单二" id="9"></lay-menu-item> <lay-menu-item title="菜单" id="9"></lay-menu-item>
<lay-sub-menu title="菜单三" id="10"> <lay-sub-menu title="菜单" id="10">
<lay-menu-item title="菜单一" id="11"></lay-menu-item> <lay-menu-item title="菜单" id="11"></lay-menu-item>
<lay-menu-item title="菜单二" id="12"></lay-menu-item> <lay-menu-item title="菜单" id="12"></lay-menu-item>
<lay-menu-item title="菜单三" id="13"></lay-menu-item> <lay-menu-item title="菜单" id="13"></lay-menu-item>
</lay-sub-menu> </lay-sub-menu>
</lay-sub-menu> </lay-sub-menu>
</lay-menu> </lay-menu>
@ -52,12 +52,12 @@ export default {
<lay-menu-item title="用户" id="2"></lay-menu-item> <lay-menu-item title="用户" id="2"></lay-menu-item>
<lay-menu-item title="角色" id="3"></lay-menu-item> <lay-menu-item title="角色" id="3"></lay-menu-item>
<lay-sub-menu title="目录" id="7"> <lay-sub-menu title="目录" id="7">
<lay-menu-item title="菜单一" id="8"></lay-menu-item> <lay-menu-item title="菜单" id="8"></lay-menu-item>
<lay-menu-item title="菜单二" id="9"></lay-menu-item> <lay-menu-item title="菜单" id="9"></lay-menu-item>
<lay-sub-menu title="菜单三" id="10"> <lay-sub-menu title="菜单" id="10">
<lay-menu-item title="菜单一" id="11"></lay-menu-item> <lay-menu-item title="菜单" id="11"></lay-menu-item>
<lay-menu-item title="菜单二" id="12"></lay-menu-item> <lay-menu-item title="菜单" id="12"></lay-menu-item>
<lay-menu-item title="菜单三" id="13"></lay-menu-item> <lay-menu-item title="菜单" id="13"></lay-menu-item>
</lay-sub-menu> </lay-sub-menu>
</lay-sub-menu> </lay-sub-menu>
</lay-menu> </lay-menu>
@ -88,17 +88,17 @@ export default {
::: demo ::: demo
<template> <template>
<lay-menu v-model:selectedKey="selectedKey" inverted="true" v-model:openKeys="openKeys" :tree="true"> <lay-menu level="true" v-model:selectedKey="selectedKey" inverted="true" v-model:openKeys="openKeys" :tree="true">
<lay-menu-item title="首页" id="1"></lay-menu-item> <lay-menu-item title="首页" id="1"></lay-menu-item>
<lay-menu-item title="用户" id="2"></lay-menu-item> <lay-menu-item title="用户" id="2"></lay-menu-item>
<lay-menu-item title="角色" id="3"></lay-menu-item> <lay-menu-item title="角色" id="3"></lay-menu-item>
<lay-sub-menu title="目录" id="7"> <lay-sub-menu title="目录" id="7">
<lay-menu-item title="菜单一" id="8"></lay-menu-item> <lay-menu-item title="菜单" id="8"></lay-menu-item>
<lay-menu-item title="菜单二" id="9"></lay-menu-item> <lay-menu-item title="菜单" id="9"></lay-menu-item>
<lay-sub-menu title="菜单三" id="10"> <lay-sub-menu title="菜单" id="10">
<lay-menu-item title="菜单一" id="11"></lay-menu-item> <lay-menu-item title="菜单" id="11"></lay-menu-item>
<lay-menu-item title="菜单二" id="12"></lay-menu-item> <lay-menu-item title="菜单" id="12"></lay-menu-item>
<lay-menu-item title="菜单三" id="13"></lay-menu-item> <lay-menu-item title="菜单" id="13"></lay-menu-item>
</lay-sub-menu> </lay-sub-menu>
</lay-sub-menu> </lay-sub-menu>
</lay-menu> </lay-menu>
@ -134,12 +134,12 @@ export default {
<lay-menu-item title="用户" id="2"></lay-menu-item> <lay-menu-item title="用户" id="2"></lay-menu-item>
<lay-menu-item title="角色" id="3"></lay-menu-item> <lay-menu-item title="角色" id="3"></lay-menu-item>
<lay-sub-menu title="目录" id="7"> <lay-sub-menu title="目录" id="7">
<lay-menu-item title="菜单一" id="8"></lay-menu-item> <lay-menu-item title="菜单" id="8"></lay-menu-item>
<lay-menu-item title="菜单二" id="9"></lay-menu-item> <lay-menu-item title="菜单" id="9"></lay-menu-item>
<lay-sub-menu title="菜单三" id="10"> <lay-sub-menu title="菜单" id="10">
<lay-menu-item title="菜单一" id="11"></lay-menu-item> <lay-menu-item title="菜单" id="11"></lay-menu-item>
<lay-menu-item title="菜单二" id="12"></lay-menu-item> <lay-menu-item title="菜单" id="12"></lay-menu-item>
<lay-menu-item title="菜单三" id="13"></lay-menu-item> <lay-menu-item title="菜单" id="13"></lay-menu-item>
</lay-sub-menu> </lay-sub-menu>
</lay-sub-menu> </lay-sub-menu>
</lay-menu> </lay-menu>
@ -179,10 +179,10 @@ export default {
<router-link to="">目录</router-link> <router-link to="">目录</router-link>
</template> </template>
<lay-menu-item id="8"> <lay-menu-item id="8">
<router-link to="">菜单一</router-link> <router-link to="">菜单</router-link>
</lay-menu-item> </lay-menu-item>
<lay-menu-item id="9"> <lay-menu-item id="9">
<router-link to="">菜单二</router-link> <router-link to="">菜单</router-link>
</lay-menu-item> </lay-menu-item>
</lay-sub-menu> </lay-sub-menu>
</lay-menu> </lay-menu>
@ -220,6 +220,7 @@ export default {
| v-model:openKeys | 打开项 | -- | | v-model:openKeys | 打开项 | -- |
| theme | 菜单主题 | `dark` `light` | | theme | 菜单主题 | `dark` `light` |
| inverted | 特殊的激活样式 | `true` `false` | | inverted | 特殊的激活样式 | `true` `false` |
| level | 菜单层级 | `true` `false` |
::: :::

6
src/component/menu/index.less
View File

@ -303,3 +303,9 @@
.layui-nav-tree.inverted .layui-this > a{ .layui-nav-tree.inverted .layui-this > a{
padding: 5px 24px 5px 24px; padding: 5px 24px 5px 24px;
} }
.layui-nav-tree.level {
.layui-nav-itemed > .layui-nav-child {
background-color: transparent;
}
}

6
src/component/menu/index.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<ul class="layui-nav" :class="[inverted ? 'inverted':'',tree ? 'layui-nav-tree' : '', theme === 'dark' ? 'layui-nav-dark':'layui-nav-light' ]"> <ul class="layui-nav" :class="[level? 'level':'',inverted ? 'inverted':'',tree ? 'layui-nav-tree' : '', theme === 'dark' ? 'layui-nav-dark':'layui-nav-light' ]">
<slot></slot> <slot></slot>
</ul> </ul>
</template> </template>
@ -14,6 +14,7 @@ export interface LayMenuProps {
tree?: boolean; tree?: boolean;
theme?: string; theme?: string;
inverted?: boolean; inverted?: boolean;
level?: boolean;
} }
const emit = defineEmits(["update:selectedKey", "update:openKeys"]); const emit = defineEmits(["update:selectedKey", "update:openKeys"]);
@ -23,7 +24,8 @@ const props = withDefaults(defineProps<LayMenuProps>(), {
openKeys: () => [], openKeys: () => [],
tree: false, tree: false,
theme: 'dark', theme: 'dark',
inverted: false inverted: false,
level: false
}); });
const isTree = computed(() => props.tree); const isTree = computed(() => props.tree);