Menu 菜单

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

基础用法

基础用法

使用list绑定数据

• 
• 首页
• 合集
• 我的

<template>
	<LiMenu :list="list"> </LiMenu>
</template>
<script setup lang="ts">
	const list = [
		{
			icon: "https://s3.bmp.ovh/imgs/2024/08/28/136ab813ae9e0e5f.png",
		},
		{
			label: "首页",
		},
		{
			label: "合集",
		},
		{
			label: "我的",
		},
	];
</script>
<style scope lang="scss"></style>

默认选择

默认选择使用default-index控制

• 
• 首页
• 合集
• 我的

<template>
	<LiMenu :default-index="1" :list="list"> </LiMenu>
</template>
<script setup lang="ts">
	const list = [
		{
			icon: "https://s3.bmp.ovh/imgs/2024/08/28/136ab813ae9e0e5f.png",
		},
		{
			label: "首页",
		},
		{
			label: "合集",
		},
		{
			label: "我的",
		},
	];
</script>
<style scope lang="scss"></style>

子菜单

使用list增加

• 
• 首页
• 合集
• 我的

<template>
	<LiMenu :default-index="1" :list="list"> </LiMenu>
</template>
<script setup lang="ts">
	const list = [
		{
			icon: "https://s3.bmp.ovh/imgs/2024/08/28/136ab813ae9e0e5f.png",
		},
		{
			label: "首页",
			list: [
				{
					label: "菜单1",
				},
				{
					label: "菜单2",
				},
				{
					label: "菜单3",
				},
			],
		},
		{
			label: "合集",
		},
		{
			label: "我的",
		},
	];
</script>
<style scope lang="scss"></style>

事件

默认选择使用@command、@sub-command控制

• 
• 首页
• 合集
• 我的

<template>
	<LiMenu
		:default-index="1"
		:list="list"
		@command="handleMenuItem"
		@sub-command="handleSubMenuItem"
	>
	</LiMenu>
</template>
<script setup lang="ts">
	const list = [
		{
			icon: "https://s3.bmp.ovh/imgs/2024/08/28/136ab813ae9e0e5f.png",
		},
		{
			label: "首页",
			list: [
				{
					label: "菜单1",
				},
				{
					label: "菜单2",
				},
				{
					label: "菜单3",
				},
			],
		},
		{
			label: "合集",
		},
		{
			label: "我的",
		},
	];
	const handleMenuItem = (index: any, item: any) => {
		console.log(index, item);
		alert(`${index}, ${item.label}`);
	};
	const handleSubMenuItem = (index: any, item: any) => {
		console.log(index, item);
		alert(`${index}, ${item.label}`);
	};
</script>
<style scope lang="scss"></style>

插槽

插槽控制页面的切换，并用data接收菜单项数据

• 
• 首页
• 合集
• 我的

{ "label": "首页" }

<template>
	<LiMenu :default-index="1" :list="list">
		<template #1="{ data }">
			<LiText>{{ data }}</LiText>
			<LiButton>{{ data.label }}</LiButton>
		</template>
		<template #2="{ data }">
			<LiText>{{ data }}</LiText>
			<LiButton type="primary">{{ data.label }}</LiButton>
		</template>
		<template #3="{ data }">
			<LiText>{{ data }}</LiText>
			<LiButton type="success">{{ data.label }}</LiButton>
		</template>
	</LiMenu>
</template>
<script setup lang="ts">
	const list = [
		{
			icon: "https://s3.bmp.ovh/imgs/2024/08/28/136ab813ae9e0e5f.png",
		},
		{
			label: "首页",
		},
		{
			label: "合集",
		},
		{
			label: "我的",
		},
	];
</script>
<style scope lang="scss"></style>

Menu Attributes

参数	说明	类型	可选值	默认值
list	菜单数据	Array		[]
default-index	默认选项	number		0

Menu Events

事件	参数	说明
command	index: number ，data:MenuItemData	第一层事件
sub-command	index: number ，data:MenuItemData	第二层事件

Menu Slots

插槽名	作用域参数	说明
[number]	data:选项数据	菜单内容