Menu 导航菜单

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

组件注册

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 / 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	`[]`

事件名称	说明	回调参数
select	选中菜单时触发	({ value: string}) => void

SubMenu Props

属性	说明	类型	默认值
value	唯一标志	string	`null`
label	子菜单的标题	string	`-`

SubMenu Slots

属性	说明
icon	子菜单的 icon
label	子菜单的标题，优先级比 props.label 高

MenuGroup Props

属性	说明	类型	默认值
label	分组菜单的标题	string	`-`

MenuGroup Slots

属性	说明
label	分组菜单的标题，优先级比 props.label 高

MenuItem Props

属性	说明	类型	默认值
value	唯一标志	string	`null`
label	菜单的标题	string	`-`

MenuItem Slots

属性	说明
icon	菜单的 icon
label	菜单的标题，优先级比 props.label 高

MenuOption

属性	说明	类型
value	菜单标识符	string
label	菜单项的内容	string 、 ()=> VNodeChild
icon	菜单项的图标	()=> VNodeChild
children	子选项，当存在子选项时渲染为子菜单或者分组菜单	`Array<MenuOption>`
isGroup	是否是分组	boolean

Menu 导航菜单 ​

组件注册 ​

代码演示 ​

水平方向 ​

垂直方向 ​

折叠 ​

只展开一个 ​

全部展开 ​

展开部分 ​

配置方式 ​

反色 ​

Menu Props ​

Menu Events ​

SubMenu Props ​

SubMenu Slots ​

MenuGroup Props ​

MenuGroup Slots ​

MenuItem Props ​

MenuItem Slots ​

MenuOption ​

组件注册

代码演示

水平方向

垂直方向

折叠

只展开一个

全部展开

展开部分

配置方式

反色

Menu Props

Menu Events

SubMenu Props

SubMenu Slots

MenuGroup Props

MenuGroup Slots

MenuItem Props

MenuItem Slots

MenuOption