Skip to content

Menu 导航菜单

为网站提供导航功能的菜单。

组件注册

js
import { FMenu } from '@fesjs/fes-design';

app.use(FMenu);

代码演示

水平方向

play
<template>
    <f-menu>
        <f-sub-menu value="1">
            <template #icon>
                <AppstoreOutlined />
            </template>
            <template #label>我是标题</template>
            <f-menu-group>
                <template #label>华中地区</template>
                <f-menu-item value="1.1">
                    <template #label>湖南</template>
                </f-menu-item>
                <f-sub-menu label="湖北">
                    <f-menu-item value="1.2.1" label="武汉市"> </f-menu-item>
                    <f-menu-item value="1.2.2" label="荆州市"> </f-menu-item>
                    <f-menu-item value="1.2.3" label="仙桃市"> </f-menu-item>
                    <f-menu-item value="1.2.4" label="黄冈市"> </f-menu-item>
                    <f-menu-item value="1.2.5" label="孝感市"> </f-menu-item>
                </f-sub-menu>
            </f-menu-group>
            <f-menu-group>
                <template #label> 华南地区 </template>
                <f-menu-item value="1.3" label="广东"></f-menu-item>
                <f-menu-item value="1.4" label="广西壮族自治区"></f-menu-item>
            </f-menu-group>
            <f-menu-group>
                <template #label> 华东地区 </template>
                <f-menu-item value="1.5" label="浙江"></f-menu-item>
            </f-menu-group>
        </f-sub-menu>
        <f-sub-menu value="2">
            <template #icon>
                <AppstoreOutlined />
            </template>
            <template #label>人群管理</template>
            <f-menu-item value="2.1">
                <template #label>富高帅</template>
            </f-menu-item>
            <f-menu-item value="2.2">
                <template #label>白富美</template>
            </f-menu-item>
            <f-sub-menu label="湖北">
                <f-menu-item value="2.3.1" label="武汉市"> </f-menu-item>
                <f-menu-item value="2.3.2" label="荆州市"> </f-menu-item>
            </f-sub-menu>
        </f-sub-menu>
        <f-menu-item value="3">
            <template #label>资源管理</template>
        </f-menu-item>
    </f-menu>
</template>

垂直方向

play
<template>
    <div style="width: 200px">
        <f-menu mode="vertical">
            <f-sub-menu value="1">
                <template #icon>
                    <AppstoreOutlined />
                </template>
                <template #label>
                    我是标题我是标题我是标题我是标题我是标题
                </template>
                <f-menu-group>
                    <template #label>华中地区</template>
                    <f-menu-item value="1.1">
                        <template #label>湖南</template>
                    </f-menu-item>
                    <f-sub-menu label="湖北">
                        <f-menu-item value="1.2.1" label="武汉市">
                        </f-menu-item>
                        <f-menu-item value="1.2.2" label="荆州市">
                        </f-menu-item>
                        <f-menu-item value="1.2.3" label="仙桃市">
                        </f-menu-item>
                        <f-menu-item value="1.2.4" label="黄冈市">
                        </f-menu-item>
                        <f-menu-item value="1.2.5" label="孝感市">
                        </f-menu-item>
                    </f-sub-menu>
                </f-menu-group>
                <f-menu-group>
                    <template #label> 华南地区 </template>
                    <f-menu-item value="1.3" label="广东"></f-menu-item>
                    <f-menu-item
                        value="1.4"
                        label="广西壮族自治区"
                    ></f-menu-item>
                </f-menu-group>
                <f-menu-group>
                    <template #label> 华东地区 </template>
                    <f-menu-item value="1.5" label="浙江"></f-menu-item>
                </f-menu-group>
            </f-sub-menu>
            <f-menu-item value="2">
                <template #icon>
                    <AppstoreOutlined />
                </template>
                <template #label>人群管理</template>
            </f-menu-item>
            <f-menu-item value="3">
                <template #icon>
                    <AppstoreOutlined />
                </template>
                <template #label>资源管理</template>
            </f-menu-item>
        </f-menu>
    </div>
</template>

折叠

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

play
<template>
    是否折叠:
    <FSwitch v-model="collapsed" style="margin: 20px"></FSwitch>
    反色:
    <f-switch v-model="inverted">
        <template #active> 深色 </template>
        <template #inactive> 浅色 </template>
    </f-switch>
    <div style="width: 200px">
        <f-menu mode="vertical" :collapsed="collapsed" :inverted="inverted">
            <f-sub-menu value="1">
                <template #icon>
                    <AppstoreOutlined />
                </template>
                <template #label>我是标题</template>
                <f-menu-group>
                    <template #label>华中地区</template>
                    <f-menu-item value="1.1">
                        <template #label>湖南</template>
                    </f-menu-item>
                    <f-sub-menu label="湖北">
                        <f-menu-item value="1.2.1" label="武汉市">
                        </f-menu-item>
                        <f-menu-item value="1.2.2" label="荆州市">
                        </f-menu-item>
                        <f-menu-item value="1.2.3" label="仙桃市">
                        </f-menu-item>
                        <f-menu-item value="1.2.4" label="黄冈市">
                        </f-menu-item>
                        <f-menu-item value="1.2.5" label="孝感市">
                        </f-menu-item>
                    </f-sub-menu>
                </f-menu-group>
                <f-menu-group>
                    <template #label> 华南地区 </template>
                    <f-menu-item value="1.3" label="广东"></f-menu-item>
                    <f-menu-item
                        value="1.4"
                        label="广西壮族自治区"
                    ></f-menu-item>
                </f-menu-group>
                <f-menu-group>
                    <template #label> 华东地区 </template>
                    <f-menu-item value="1.5" label="浙江"></f-menu-item>
                </f-menu-group>
            </f-sub-menu>
            <f-sub-menu value="2">
                <template #icon>
                    <AppstoreOutlined />
                </template>
                <template #label>人群管理</template>
                <f-menu-item value="2.1">
                    <template #label>富高帅</template>
                </f-menu-item>
                <f-menu-item value="2.2">
                    <template #label>白富美</template>
                </f-menu-item>
                <f-sub-menu label="湖北">
                    <f-menu-item value="2.3.1" label="武汉市"> </f-menu-item>
                    <f-menu-item value="2.3.2" label="荆州市"> </f-menu-item>
                </f-sub-menu>
            </f-sub-menu>
            <f-menu-item value="3">
                <template #icon>
                    <AppstoreOutlined />
                </template>
                <template #label>资源管理</template>
            </f-menu-item>
        </f-menu>
    </div>
</template>
<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
    setup() {
        const collapsed = ref(false);
        const inverted = ref(false);
        return {
            collapsed,
            inverted,
        };
    },
});
</script>

只展开一个

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

play
<template>
    <div style="width: 200px">
        <f-menu mode="vertical" accordion>
            <f-sub-menu value="1">
                <template #icon>
                    <AppstoreOutlined />
                </template>
                <template #label>我是标题</template>
                <f-menu-group>
                    <template #label>华中地区</template>
                    <f-menu-item value="1.1">
                        <template #label>湖南</template>
                    </f-menu-item>
                    <f-sub-menu label="湖北">
                        <f-menu-item value="1.2.1" label="武汉市">
                        </f-menu-item>
                        <f-menu-item value="1.2.2" label="荆州市">
                        </f-menu-item>
                        <f-menu-item value="1.2.3" label="仙桃市">
                        </f-menu-item>
                        <f-menu-item value="1.2.4" label="黄冈市">
                        </f-menu-item>
                        <f-menu-item value="1.2.5" label="孝感市">
                        </f-menu-item>
                    </f-sub-menu>
                </f-menu-group>
                <f-menu-group>
                    <template #label> 华南地区 </template>
                    <f-menu-item value="1.3" label="广东"></f-menu-item>
                    <f-menu-item
                        value="1.4"
                        label="广西壮族自治区"
                    ></f-menu-item>
                </f-menu-group>
                <f-menu-group>
                    <template #label> 华东地区 </template>
                    <f-menu-item value="1.5" label="浙江"></f-menu-item>
                </f-menu-group>
            </f-sub-menu>
            <f-menu-item value="2">
                <template #icon>
                    <AppstoreOutlined />
                </template>
                <template #label>人群管理</template>
            </f-menu-item>
            <f-menu-item value="3">
                <template #icon>
                    <AppstoreOutlined />
                </template>
                <template #label>资源管理</template>
            </f-menu-item>
            <f-sub-menu value="4">
                <template #icon>
                    <AppstoreOutlined />
                </template>
                <template #label>我是标题</template>
                <f-menu-group>
                    <template #label>华中地区</template>
                    <f-menu-item value="4.1">
                        <template #label>湖南</template>
                    </f-menu-item>
                    <f-sub-menu label="湖北">
                        <f-menu-item value="4.2.1" label="武汉市">
                        </f-menu-item>
                        <f-menu-item value="4.2.2" label="荆州市">
                        </f-menu-item>
                        <f-menu-item value="4.2.3" label="仙桃市">
                        </f-menu-item>
                        <f-menu-item value="4.2.4" label="黄冈市">
                        </f-menu-item>
                        <f-menu-item value="4.2.5" label="孝感市">
                        </f-menu-item>
                    </f-sub-menu>
                </f-menu-group>
                <f-menu-group>
                    <template #label> 华南地区 </template>
                    <f-menu-item value="4.3" label="广东"></f-menu-item>
                    <f-menu-item
                        value="4.4"
                        label="广西壮族自治区"
                    ></f-menu-item>
                </f-menu-group>
                <f-menu-group>
                    <template #label> 华东地区 </template>
                    <f-menu-item value="4.5" label="浙江"></f-menu-item>
                </f-menu-group>
            </f-sub-menu>
        </f-menu>
    </div>
</template>

全部展开

play
<template>
    <div style="width: 200px">
        <f-menu mode="vertical" defaultExpandAll>
            <f-sub-menu value="1">
                <template #icon>
                    <AppstoreOutlined />
                </template>
                <template #label>我是标题</template>
                <f-menu-group>
                    <template #label>华中地区</template>
                    <f-menu-item value="1.1">
                        <template #label>湖南</template>
                    </f-menu-item>
                    <f-sub-menu label="湖北">
                        <f-menu-item value="1.2.1" label="武汉市">
                        </f-menu-item>
                        <f-menu-item value="1.2.2" label="荆州市">
                        </f-menu-item>
                        <f-menu-item value="1.2.3" label="仙桃市">
                        </f-menu-item>
                        <f-menu-item value="1.2.4" label="黄冈市">
                        </f-menu-item>
                        <f-menu-item value="1.2.5" label="孝感市">
                        </f-menu-item>
                    </f-sub-menu>
                </f-menu-group>
                <f-menu-group>
                    <template #label> 华南地区 </template>
                    <f-menu-item value="1.3" label="广东"></f-menu-item>
                    <f-menu-item
                        value="1.4"
                        label="广西壮族自治区"
                    ></f-menu-item>
                </f-menu-group>
                <f-menu-group>
                    <template #label> 华东地区 </template>
                    <f-menu-item value="1.5" label="浙江"></f-menu-item>
                </f-menu-group>
            </f-sub-menu>
            <f-menu-item value="2">
                <template #icon>
                    <AppstoreOutlined />
                </template>
                <template #label>人群管理</template>
            </f-menu-item>
            <f-menu-item value="3">
                <template #icon>
                    <AppstoreOutlined />
                </template>
                <template #label>资源管理</template>
            </f-menu-item>
        </f-menu>
    </div>
</template>

展开部分

play
<template>
    <div style="width: 200px">
        <f-menu mode="vertical" :expandedKeys="['4']">
            <f-sub-menu value="1">
                <template #icon>
                    <AppstoreOutlined />
                </template>
                <template #label>我是标题</template>
                <f-menu-group>
                    <template #label>华中地区</template>
                    <f-menu-item value="1.1">
                        <template #label>湖南</template>
                    </f-menu-item>
                    <f-sub-menu label="湖北">
                        <f-menu-item value="1.2.1" label="武汉市">
                        </f-menu-item>
                        <f-menu-item value="1.2.2" label="荆州市">
                        </f-menu-item>
                        <f-menu-item value="1.2.3" label="仙桃市">
                        </f-menu-item>
                        <f-menu-item value="1.2.4" label="黄冈市">
                        </f-menu-item>
                        <f-menu-item value="1.2.5" label="孝感市">
                        </f-menu-item>
                    </f-sub-menu>
                </f-menu-group>
                <f-menu-group>
                    <template #label> 华南地区 </template>
                    <f-menu-item value="1.3" label="广东"></f-menu-item>
                    <f-menu-item
                        value="1.4"
                        label="广西壮族自治区"
                    ></f-menu-item>
                </f-menu-group>
                <f-menu-group>
                    <template #label> 华东地区 </template>
                    <f-menu-item value="1.5" label="浙江"></f-menu-item>
                </f-menu-group>
            </f-sub-menu>
            <f-menu-item value="2">
                <template #icon>
                    <AppstoreOutlined />
                </template>
                <template #label>人群管理</template>
            </f-menu-item>
            <f-menu-item value="3">
                <template #icon>
                    <AppstoreOutlined />
                </template>
                <template #label>资源管理</template>
            </f-menu-item>
            <f-sub-menu value="4">
                <template #icon>
                    <AppstoreOutlined />
                </template>
                <template #label>我是标题</template>
                <f-menu-group>
                    <template #label>华中地区</template>
                    <f-menu-item value="4.1">
                        <template #label>湖南</template>
                    </f-menu-item>
                    <f-sub-menu label="湖北">
                        <f-menu-item value="4.2.1" label="武汉市">
                        </f-menu-item>
                        <f-menu-item value="4.2.2" label="荆州市">
                        </f-menu-item>
                        <f-menu-item value="4.2.3" label="仙桃市">
                        </f-menu-item>
                        <f-menu-item value="4.2.4" label="黄冈市">
                        </f-menu-item>
                        <f-menu-item value="4.2.5" label="孝感市">
                        </f-menu-item>
                    </f-sub-menu>
                </f-menu-group>
                <f-menu-group>
                    <template #label> 华南地区 </template>
                    <f-menu-item value="4.3" label="广东"></f-menu-item>
                    <f-menu-item
                        value="4.4"
                        label="广西壮族自治区"
                    ></f-menu-item>
                </f-menu-group>
                <f-menu-group>
                    <template #label> 华东地区 </template>
                    <f-menu-item value="4.5" label="浙江"></f-menu-item>
                </f-menu-group>
            </f-sub-menu>
        </f-menu>
    </div>
</template>

配置方式

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

play
<template>
    <f-menu v-model="value" :options="options"></f-menu>
</template>
<script>
import { ref, h } from 'vue';
// eslint-disable-next-line import/no-unresolved
import { AppstoreOutlined } from '@fesjs/fes-design/icon';
export default {
    setup() {
        const value = ref(2);
        const options = ref([]);

        setTimeout(() => {
            options.value = [
                {
                    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',
                },
            ];
        }, 1000);

        return {
            value,
            options,
        };
    },
};
</script>

反色

显示反色主题。

play
<template>
    <FSpace vertical>
        <f-switch v-model="inverted">
            <template #active> 深色 </template>
            <template #inactive> 浅色 </template>
        </f-switch>
        <f-menu :inverted="inverted">
            <f-sub-menu value="1">
                <template #icon>
                    <AppstoreOutlined />
                </template>
                <template #label>我是标题</template>
                <f-menu-group>
                    <template #label>华中地区</template>
                    <f-menu-item value="1.1">
                        <template #label>湖南</template>
                    </f-menu-item>
                    <f-sub-menu label="湖北">
                        <f-menu-item value="1.2.1" label="武汉市">
                        </f-menu-item>
                        <f-menu-item value="1.2.2" label="荆州市">
                        </f-menu-item>
                        <f-menu-item value="1.2.3" label="仙桃市">
                        </f-menu-item>
                        <f-menu-item value="1.2.4" label="黄冈市">
                        </f-menu-item>
                        <f-menu-item value="1.2.5" label="孝感市">
                        </f-menu-item>
                    </f-sub-menu>
                </f-menu-group>
                <f-menu-group>
                    <template #label> 华南地区 </template>
                    <f-menu-item value="1.3" label="广东"></f-menu-item>
                    <f-menu-item
                        value="1.4"
                        label="广西壮族自治区"
                    ></f-menu-item>
                </f-menu-group>
                <f-menu-group>
                    <template #label> 华东地区 </template>
                    <f-menu-item value="1.5" label="浙江"></f-menu-item>
                </f-menu-group>
            </f-sub-menu>
            <f-menu-item value="2">
                <template #icon>
                    <AppstoreOutlined />
                </template>
                <template #label>人群管理</template>
            </f-menu-item>
            <f-menu-item value="3">
                <template #label>资源管理</template>
            </f-menu-item>
        </f-menu>
    </FSpace>
</template>
<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
    setup() {
        const inverted = ref(false);
        return {
            inverted,
        };
    },
});
</script>
属性说明类型默认值
modelValue(v-model)当前选中菜单标识符string / numbernull
mode模式,可选值有horizontalverticalstringhorizontal
collapsed是否水平折叠收起菜单(仅在 mode 为 vertical 时可用)booleanfalse
inverted是否反转样式booleanfalse
defaultExpandAll是否默认展开全部菜单,当有 expandedKeys 时,defaultExpandAll 将失效booleanfalse
expandedKeys(v-model)展开的子菜单标识符数组array[]
accordion是否只保持一个子菜单的展开booleanfalse
options菜单数据,配置可看 MenuOptionarray[]
事件名称说明回调参数
select选中菜单时触发({ value: string}) => void
属性说明类型默认值
value唯一标志stringnull
label子菜单的标题string-
属性说明
icon子菜单的 icon
label子菜单的标题,优先级比 props.label 高
属性说明类型默认值
label分组菜单的标题string-
属性说明
label分组菜单的标题,优先级比 props.label 高
属性说明类型默认值
value唯一标志stringnull
label菜单的标题string-
属性说明
icon菜单的 icon
label菜单的标题,优先级比 props.label 高
属性说明类型
value菜单标识符string
label菜单项的内容string 、 ()=> VNodeChild
icon菜单项的图标()=> VNodeChild
children子选项,当存在子选项时渲染为子菜单或者分组菜单Array<MenuOption>
isGroup是否是分组boolean