更新记录

1.0.1.2（2025-12-13）

增加说明

1.0.1（2025-12-12）

支持自定义背景

1.0.0（2025-12-12）

第一次提交

平台兼容性

uni-app(4.0)

侧栏菜单组件

Props 参数

示例用法

<script setup>
const menuList = [
  {
    id: 1,
    name: '菜单1',
    children: [
      { id: 11, name: '子菜单1-1' },
      { id: 12, name: '子菜单1-2' }
    ]
  },
  {
    id: 2,
    name: '菜单2',
    children: [
      { id: 21, name: '子菜单2-1' },
      { id: 22, name: '子菜单2-2' }
    ]
  }
]
</script>

<template>
  <wy-side-menu :list="menuList" label-key="name" value-key="id">
    <!-- 左侧菜单插槽 -->
    <template #left="{ item }">
      <text>{{ item.name }}</text>
    </template>

    <!-- 右侧内容插槽 -->
    <template #right="{ data }">
      <view v-for="subItem in data.children" :key="subItem.id" class="content-item">
        {{ subItem.name }}
      </view>
    </template>
  </wy-side-menu>
</template>

插槽说明

事件说明

组件内部通过点击左侧菜单或滚动右侧内容来切换当前选中的菜单项，无需额外绑定事件。