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

!69 menu组件新增childSpacing属性添加与父菜单的间距以更好的进行视觉分辨。

Browse Source 
Merge pull request !69 from ice-creams/next
This commit is contained in:
就眠儀式 2022-05-05 03:42:55 +00:00 committed by Gitee
commit a71dffb6f5
No known key found for this signature in database
GPG Key ID: 173E9B9CA92EEF8F
3 changed files with 9 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
package/component/src/component/menu/index.less
View File

@ -309,3 +309,8 @@
background-color: transparent; background-color: transparent;
} }
} }
.layui-nav-child-spacing .layui-nav-item .layui-nav-child {
padding-left: 10px;
box-sizing: border-box;
}

3
package/component/src/component/menu/index.vue
View File

@ -17,6 +17,7 @@ export interface LayMenuProps {
level?: boolean | string; level?: boolean | string;
collapse?: boolean | string; collapse?: boolean | string;
collapseTransition?: boolean | string; collapseTransition?: boolean | string;
childSpacing?: boolean;
} }
const emit = defineEmits([ const emit = defineEmits([
@ -35,6 +36,7 @@ const props = withDefaults(defineProps<LayMenuProps>(), {
level: true, level: true,
collapse: false, collapse: false,
collapseTransition: true, collapseTransition: true,
childSpacing: false,
}); });
const isTree = computed(() => props.tree); const isTree = computed(() => props.tree);
@ -91,6 +93,7 @@ provide("isCollapseTransition", isCollapseTransition);
tree ? 'layui-nav-tree' : '', tree ? 'layui-nav-tree' : '',
theme === 'dark' ? 'layui-nav-dark' : 'layui-nav-light', theme === 'dark' ? 'layui-nav-dark' : 'layui-nav-light',
collapse ? 'layui-nav-collapse' : '', collapse ? 'layui-nav-collapse' : '',
childSpacing ? 'layui-nav-child-spacing' : '',
]" ]"
> >
<slot></slot> <slot></slot>

1
package/document/src/document/zh-CN/components/menu.md
View File

@ -487,6 +487,7 @@ export default {
| level | 菜单层级 | `true` `false` | | level | 菜单层级 | `true` `false` |
| collapse | 折叠状态 | `true` `false` | | collapse | 折叠状态 | `true` `false` |
| collapse-transition | 折叠动画 | `true` `false` | | collapse-transition | 折叠动画 | `true` `false` |
| child-spacing | 子菜单增加间距 | `true` `false` |
::: :::