From fa1757887ac3c191aa6b274136ed7e181df1fca4 Mon Sep 17 00:00:00 2001 From: GaoNengwWw Date: Thu, 21 Apr 2022 13:20:06 +0800 Subject: [PATCH 1/2] =?UTF-8?q?fix(menu):=20=E4=BF=AE=E5=A4=8D=E4=BA=86?= =?UTF-8?q?=E5=8A=A8=E7=94=BB=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/devui-vue/devui/menu/index.ts | 2 +- .../menu/src/composables/layer-composables.ts | 1 - packages/devui-vue/devui/menu/src/menu.scss | 17 +++---- .../devui-vue/docs/components/menu/index.md | 46 +++++++++++++++++-- .../docs/en-US/components/menu/index.md | 46 ++++++++++++++++--- 5 files changed, 88 insertions(+), 24 deletions(-) diff --git a/packages/devui-vue/devui/menu/index.ts b/packages/devui-vue/devui/menu/index.ts index 6be639dbe3..56709a43cc 100644 --- a/packages/devui-vue/devui/menu/index.ts +++ b/packages/devui-vue/devui/menu/index.ts @@ -8,7 +8,7 @@ export { Menu,SubMenu,MenuItem }; export default { title: 'Menu 菜单', category: '布局', - status: "90%", // TODO: 组件若开发完成则填入"100%"，并删除该注释 + status: "20%", // TODO: 组件若开发完成则填入"100%"，并删除该注释 install(app: App): void { app.component(Menu.name, Menu); app.component(MenuItem.name, MenuItem); diff --git a/packages/devui-vue/devui/menu/src/composables/layer-composables.ts b/packages/devui-vue/devui/menu/src/composables/layer-composables.ts index e1feac8a44..71e2cd00dc 100644 --- a/packages/devui-vue/devui/menu/src/composables/layer-composables.ts +++ b/packages/devui-vue/devui/menu/src/composables/layer-composables.ts @@ -85,7 +85,6 @@ export function changeKey(ele: HTMLElement,event: clickEvent): void{ break; } } - debugger; while (stack.length){ const shiftItem = stack.shift(); if (shiftItem?.tagName === 'UL' || diff --git a/packages/devui-vue/devui/menu/src/menu.scss b/packages/devui-vue/devui/menu/src/menu.scss index 07f5efc7b6..26c8775a9d 100644 --- a/packages/devui-vue/devui/menu/src/menu.scss +++ b/packages/devui-vue/devui/menu/src/menu.scss @@ -5,7 +5,7 @@ $devui-menu-item-margin: 10px; .fade-enter-active, .fade-leave-active { - transition: opacity 300ms ease; + transition: opacity $devui-animation-duration-slow $devui-animation-ease-in-smooth; } .fade-leave-to { @@ -74,7 +74,7 @@ $devui-menu-item-margin: 10px; } ::after { - transition: all 200ms $devui-animation-ease-in-out-smooth; + transition: all 200ms $devui-animation-ease-in-smooth; background: transparent; } @@ -135,7 +135,7 @@ $devui-menu-item-margin: 10px; } .devui-menu-item-horizontal-wrapper { - transition: all 0.8s ease-in-out; + transition: all 0.8s $devui-animation-ease-in-smooth; position: absolute; margin-top: 10px; padding: 0 !important; @@ -178,17 +178,17 @@ $devui-menu-item-margin: 10px; .devui-menu-vertical { padding: 0; - transition: width 0.5s ease, padding 0.5s ease; + transition: width 0.5s $devui-animation-ease-in-smooth, padding 0.5s $devui-animation-ease-in-smooth; border-right: $devui-line 1px solid; background: $devui-area !important; li, ul { - transition: height 800ms ease, max-height 400ms ease; + transition: height $devui-animation-duration-slow $devui-animation-ease-in-smooth, max-height $devui-animation-duration-slow $devui-animation-ease-in-smooth; } ::after { - transition: all 300ms ease-in-out; + transition: all $devui-animation-duration-slow $devui-animation-ease-in-smooth; background: transparent; } @@ -338,9 +338,6 @@ $devui-menu-item-margin: 10px; li { height: 0; - opacity: 0; - visibility: hidden; - overflow-y: hidden; } ul { @@ -395,7 +392,7 @@ $devui-menu-item-margin: 10px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; - transition: all 0.5s ease; + transition: all 0.5s $devui-animation-ease-in-smooth; color: $devui-menu-item-sub; } } diff --git a/packages/devui-vue/docs/components/menu/index.md b/packages/devui-vue/docs/components/menu/index.md index 567fd84034..23543e4530 100644 --- a/packages/devui-vue/docs/components/menu/index.md +++ b/packages/devui-vue/docs/components/menu/index.md @@ -36,6 +36,28 @@ Menu 组件通常用于导航. ::: +### 自定义图标 + +有时我们需要为子菜单或菜单项定义一些图标，此时我们可以使用```icon```插槽来为菜单定义icon。同时我们也可以使用css来对插槽进行定制化的修改. + +:::demo +```vue + +``` +::: + ### 垂直菜单 垂直菜单一般在后台中较为广泛使用，子菜单可以嵌入菜单中 @@ -149,6 +171,8 @@ const changeCollapsed = () => { ### 取消多选 +取消多选功能仅能使用在允许多选的菜单中，菜单项将会在取消多选时触发`deselect`事件。 + :::demo ```vue @@ -221,8 +245,6 @@ const changeDisabled = () => { ::: -## d-menu - ### d-menu 参数 | 参数 | 类型 | 默认 | 说明 | 跳转 Demo | 全局配置项 | @@ -244,7 +266,7 @@ const changeDisabled = () => { | dselect | ```(e: {type: 'dselect', el: HTMLElement})=>void``` | 取消选中时触发该事件，如果菜单不是多选菜单不会被触发 | | | submenu-change | ```(e: {type: 'submenu-change': el: HTMLElement: state: boolean})=>void``` | 子菜单状态被更改时会触发 | -## d-menu-item +### d-menu-item | 参数 | 类型 | 默认 | 说明 | 跳转 Demo | 全局配置项 | @@ -253,14 +275,28 @@ const changeDisabled = () => { |key|string|''|菜单项的key值，需唯一||| |href|string|''|单击菜单项后跳转的页面|[基本用法](#基本用法)| -## d-sub-menu +### d-sub-menu + | 参数 | 类型 | 默认 | 说明 | 跳转 Demo | 全局配置项 | | :----: | :----: | :----: | :----: | :---------: | ---------- | |title|String|''|子菜单标题||| |disable|boolean|false|是否禁用子菜单||| -## 接口及其定义 +### d-menu-item 插槽 + +| 插槽名 | 说明 | +| :---: | :--: | +|icon|用于定义菜单项的icon| + +### d-sub-menu 插槽 + +| 插槽名 | 说明 | +| :---: |:---:| +|icon|用于定义子菜单标题的icon| + +### 接口及其定义 ``` typescript export type menuMode = 'vertical' | 'horizontal'; ``` + diff --git a/packages/devui-vue/docs/en-US/components/menu/index.md b/packages/devui-vue/docs/en-US/components/menu/index.md index ca9ef03f60..9a5310d28d 100644 --- a/packages/devui-vue/docs/en-US/components/menu/index.md +++ b/packages/devui-vue/docs/en-US/components/menu/index.md @@ -32,6 +32,28 @@ When it comes to packing, arranging, and displaying a range of options. ::: +### custom icons. + +Sometimes we need declare icon for submenu or menu item. That we can use ```icon``` slot to declare icon of sub menu or menu item. At the same time, we can use ```css`` to make to make customized modifications for slot + +:::demo +```vue + +``` +::: + ### vertical Menu vertical menu usually used in back-end. sub-menu can Embed in a menu @@ -219,9 +241,7 @@ const changeDisabled = () => { ::: -## d-menu - -### d-menu 参数 +### d-menu arguments | argument | type | default value | introduce| Demo| global config | | --- | --- | --- | --- | --- | --- | @@ -234,7 +254,7 @@ const changeDisabled = () => { | open-keys | Array | [] | default open sub menu's key | [default open](#default open) | | | default-select-keys | Array | [] | default select menu item's key | / | | -### d-menu 事件 +### d-menu event | event| type|introduce| Demo | | :---: | :---: | :---: | :---: | :---: | :---: | @@ -242,7 +262,7 @@ const changeDisabled = () => { | dselect | `(e: {type: 'dselect', el: HTMLElement})=>void` | The event is triggered when unchecked, if the menu is not multi-select the menu is not triggered | | | submenu-change | `(e: {type: 'submenu-change': el: HTMLElement: state: boolean})=>void` | Triggered when the submenu state is changed | -## d-menu-item +### d-menu-item arguments | argument | type | default value | introduce| Demo| global config | | :---: | :---: | :---: | --- | --- | :---: | @@ -250,14 +270,26 @@ const changeDisabled = () => { | key | string | '' | menu item's key. Must is unique | | | | href | string | '' | click menu item will link to page url. | [基本用法](#基本用法) | -## d-sub-menu +### d-sub-menu event | event| type|introduce| Demo | | :---: | :---: | :---: | :---: | :---: | :---: | | title | String | '' | sub menu's title | | | | disable | boolean | false | disabled sub menu | | | -## Interface & declare +### d-menu-item slot + +| slot name | description | +| :---: | :--: | +|icon|declare menu item icon| + +### d-sub-menu slot + +| slot name | description | +| :---: |:---:| +|icon|declare sub menu icon| + +### Interface & declare ```typescript export type menuMode = 'vertical' | 'horizontal'; From 633a87a86642d58e6b527a277a1c79bfc0c3f0d4 Mon Sep 17 00:00:00 2001 From: GaoNengwWw Date: Thu, 21 Apr 2022 13:34:21 +0800 Subject: [PATCH 2/2] =?UTF-8?q?style(menu):=20=E4=B8=8A=E8=B0=83=E4=BA=86m?= =?UTF-8?q?enu=E7=9A=84=E5=AE=8C=E6=88=90=E7=8A=B6=E6=80=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/devui-vue/devui/menu/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/devui-vue/devui/menu/index.ts b/packages/devui-vue/devui/menu/index.ts index 56709a43cc..a578dc6a2f 100644 --- a/packages/devui-vue/devui/menu/index.ts +++ b/packages/devui-vue/devui/menu/index.ts @@ -8,7 +8,7 @@ export { Menu,SubMenu,MenuItem }; export default { title: 'Menu 菜单', category: '布局', - status: "20%", // TODO: 组件若开发完成则填入"100%"，并删除该注释 + status: "60%", // TODO: 组件若开发完成则填入"100%"，并删除该注释 install(app: App): void { app.component(Menu.name, Menu); app.component(MenuItem.name, MenuItem);