Skip to content

Commit

Permalink
feat(Menu): 支持 popper 的 getContainer (#765)
Browse files Browse the repository at this point in the history
  • Loading branch information
@1zumii
1zumii authored Apr 25, 2024
1 parent eff8d85 commit 9b5142e
Show file tree
Hide file tree
Showing 4 changed files with 135 additions and 20 deletions.
4 changes: 4 additions & 0 deletions components/menu/const.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,9 @@ import type {
PropType,
} from 'vue';

import { pick } from 'lodash-es';
import type { ExtractPublicPropTypes } from '../_util/interface';
import { popperProps } from '../popper/props';
import type { MenuOption } from './interface';

export const MODE = ['horizontal', 'vertical'] as const;
Expand Down Expand Up @@ -75,6 +77,8 @@ export const menuProps = {
return [];
},
},
// popper 透传的 props
...pick(popperProps, ['getContainer', 'appendToContainer']),
} as const satisfies ComponentObjectPropsOptions;

export type MenuProps = ExtractPublicPropTypes<typeof menuProps>;
8 changes: 8 additions & 0 deletions components/menu/subMenu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import type {
ComponentObjectPropsOptions,
PropType,
} from 'vue';
import { pick } from 'lodash-es';
import getPrefixCls from '../_util/getPrefixCls';
import FadeInExpandTransition from '../_util/components/fadeInExpandTransition';
import Popper from '../popper/popper';
Expand Down Expand Up @@ -180,11 +181,18 @@ export default defineComponent({
</div>
);
const renderDefault = () => slots.default?.();
const popperProps = computed(() => {
if (!rootMenu.renderWithPopper.value) {
return {};
}
return pick(rootMenu.props, ['getContainer', 'appendToContainer']);
});
const renderContent = () => {
if (rootMenu.renderWithPopper.value) {
return (
<Popper
v-model={isOpened.value}
{...popperProps.value}
trigger="hover"
onlyShowTrigger={true}
placement={placement.value}
Expand Down
80 changes: 80 additions & 0 deletions docs/.vitepress/components/menu/customContainer.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
<template>
<FScrollbar ref="container" :height="150">
<FMenu
v-model="value"
:options="options"
:getContainer="getMenuPopperContainer"
/>
<br>
<div v-for="(_, index) in Array.from({ length: 10 })" :key="index" style="color: lightgrey">
PLACEHOLDER_TEXT
</div>
</FScrollbar>
</template>

<script setup>
import { h, ref } from 'vue';
import { AppstoreOutlined } from '@fesjs/fes-design/icon';
const value = ref(2);
const options = ref([
{
label: () => '我是子菜单',
icon: () => {
return h(AppstoreOutlined);
},
value: '1',
children: [
{
label: '华中地区',
isGroup: true,
children: [
{
value: '1.1',
label: '湖南',
},
{
value: '1.2',
label: '湖北',
children: [
{
label: '武汉',
value: '1.2.1',
},
{
label: '孝感',
value: '1.2.2',
},
],
},
],
},
{
label: '华南地区',
isGroup: true,
children: [
{
value: '1.3',
label: '深圳',
},
{
value: '1.4',
label: '广州',
},
],
},
],
},
{
label: '人群管理',
value: 2,
},
{
label: '资源管理',
value: '3',
},
]);
const container = ref();
const getMenuPopperContainer = () => container.value?.$el;
</script>
63 changes: 43 additions & 20 deletions docs/.vitepress/components/menu/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,58 +14,81 @@ app.use(FMenu);

### 水平方向

--COMMON
:::demo
common.vue
:::

### 垂直方向

--VERTICAL
:::demo
vertical.vue
:::

#### 折叠

收起菜单，只显示 `Icon`，留更多的空间展示页面内容。

--COLLAPSE
:::demo
collapse.vue
:::

#### 只展开一个

展开子菜单，同时关闭其他子菜单。

--ACCORDION
:::demo
accordion.vue
:::

#### 全部展开

--DEFAULTEXPANDALL
:::demo
defaultExpandAll.vue
:::

#### 展开部分

--EXPANDEDKEYS
:::demo
expandedKeys.vue
:::

### 配置方式

通过配置`options`直接生成菜单，比如可以通过路由数据生成菜单。
通过配置 `options` 直接生成菜单，比如可以通过路由数据生成菜单。

--OPTIONS
:::demo
options.vue
:::

### 反色

显示反色主题。

--INVERTED
:::demo
inverted.vue
:::

--CODE
### 自定义挂载

:::demo
customContainer.vue
:::

## Menu Props

| 属性 | 说明 | 类型 | 默认值 |
| --------------------- | ----------------------------------------------------------------------- | --------------- | ------------ |
| modelValue(v-model) | 当前选中菜单标识符 | string / number | `null` |
| mode | 模式，可选值有`horizontal`和`vertical` | string | `horizontal` |
| collapsed | 是否水平折叠收起菜单（仅在 mode 为 vertical 时可用） | boolean | `false` |
| inverted | 是否反转样式 | boolean | `false` |
| defaultExpandAll | 是否默认展开全部菜单，当有 `expandedKeys` 时，`defaultExpandAll` 将失效 | boolean | `false` |
| expandedKeys(v-model) | 展开的子菜单标识符数组 | array | `[]` |
| accordion | 是否只保持一个子菜单的展开 | boolean | `false` |
| options | 菜单数据，配置可看 MenuOption | array | `[]` |
| 属性 | 说明 | 类型 | 默认值 |
|-----------------------|---------------------------------------------------------------------|-------------------|-----------------------|
| modelValue(v-model) | 当前选中菜单标识符 | string / number | `null` |
| mode | 模式，可选值有`horizontal`和`vertical` | string | `horizontal` |
| collapsed | 是否水平折叠收起菜单（仅在 mode 为 vertical 时可用） | boolean | `false` |
| inverted | 是否反转样式 | boolean | `false` |
| defaultExpandAll | 是否默认展开全部菜单，当有 `expandedKeys` 时，`defaultExpandAll` 将失效 | boolean | `false` |
| expandedKeys(v-model) | 展开的子菜单标识符数组 | array | `[]` |
| accordion | 是否只保持一个子菜单的展开 | boolean | `false` |
| options | 菜单数据，配置可看 MenuOption | array | `[]` |
| getContainer | 配置渲染节点的输出位置 | () => HTMLElement | `() => document.body` |
| appendToContainer | 弹窗内容是否添加到指定的 DOM 元素 | boolean | `true` |


## Menu Events

Expand Down

0 comments on commit 9b5142e

Please sign in to comment.