Yy Craft

主题

Menu 菜单 ​

基本用法 ​

查看示例
vue
<script setup lang="ts">
import type { MenuOption } from 'yy-craft'

const basicMenuOptions: MenuOption[] = [
  {
    label: '曾姐老火锅',
    key: '曾姐老火锅',
  },
  {
    label: '南瓜土豆汤',
    key: '南瓜土豆汤',
  },
]
</script>

<template>
  <yy-menu :options="basicMenuOptions" />
</template>
查看示例
vue
<script setup lang="ts">
import type { MenuOption } from 'yy-craft'
import { AlarmOutline } from '@vicons/ionicons5'
import { h } from 'vue'

const basicMenuOptions: MenuOption[] = [
  {
    label: '曾姐老火锅',
    key: '曾姐老火锅',
  },
  {
    label: '南湖春天冒菜',
    key: '南湖春天冒菜',
  },
  {
    label: '剁椒鱼头',
    key: '剁椒鱼头',
    children: [
      {
        label: '大餐',
        key: '大餐',
        type: 'group',
        children: [
          {
            label: '炒腊肉',
            key: '炒腊肉',
          },
          {
            label: '可乐鸡翅',
            key: '可乐鸡翅',
          },
        ],
      },
    ],
  },
  {
    label: '南湖春天串串',
    key: '南湖春天串串',
  },
  {
    label: '南瓜土豆汤',
    key: '南瓜土豆汤',
    icon: () => h(AlarmOutline),
  },
]
</script>

<template>
  <yy-menu :options="basicMenuOptions" />
</template>

默认展开 ​

查看示例
vue
<script setup lang="ts">
import type { MenuOption } from 'yy-craft'
import { AlarmOutline } from '@vicons/ionicons5'
import { h } from 'vue'

const basicMenuOptions: MenuOption[] = [
  {
    label: '曾姐老火锅',
    key: '曾姐老火锅',
  },
  {
    label: '南湖春天冒菜',
    key: '南湖春天冒菜',
  },
  {
    label: '剁椒鱼头',
    key: '剁椒鱼头',
    children: [
      {
        label: '大餐',
        key: '大餐',
        type: 'group',
        children: [
          {
            label: '炒腊肉',
            key: '炒腊肉',
          },
          {
            label: '可乐鸡翅',
            key: '可乐鸡翅',
          },
        ],
      },
    ],
  },
  {
    label: '南湖春天串串',
    key: '南湖春天串串',
  },
  {
    label: '南瓜土豆汤',
    key: '南瓜土豆汤',
    icon: () => h(AlarmOutline),
  },
]
</script>

<template>
  <yy-menu :options="basicMenuOptions" :default-expanded-keys="['剁椒鱼头']" />
</template>

默认选中 ​

查看示例
vue
<script setup lang="ts">
import type { MenuOption } from 'yy-craft'
import { AlarmOutline } from '@vicons/ionicons5'
import { h, reactive } from 'vue'

const basicMenuOptions: MenuOption[] = [
  {
    label: '曾姐老火锅',
    key: '曾姐老火锅',
  },
  {
    label: '南湖春天冒菜',
    key: '南湖春天冒菜',
  },
  {
    label: '剁椒鱼头',
    key: '剁椒鱼头',
    children: [
      {
        label: '大餐',
        key: '大餐',
        type: 'group',
        children: [
          {
            label: '炒腊肉',
            key: '炒腊肉',
          },
          {
            label: '可乐鸡翅',
            key: '可乐鸡翅',
          },
        ],
      },
    ],
  },
  {
    label: '南湖春天串串',
    key: '南湖春天串串',
  },
  {
    label: '南瓜土豆汤',
    key: '南瓜土豆汤',
    icon: () => h(AlarmOutline),
  },
]

const selectedKeys = reactive(['炒腊肉'])
</script>

<template>
  <yy-menu v-model:selected-keys="selectedKeys" :options="basicMenuOptions" />
</template>

收起状态 ​

查看示例
vue
<script setup lang="ts">
import type { MenuOption } from 'yy-craft'
import { AlarmOutline } from '@vicons/ionicons5'
import { h, ref } from 'vue'

const basicMenuOptions: MenuOption[] = [
  {
    label: '曾姐老火锅',
    key: '曾姐老火锅',
  },
  {
    label: '南湖春天冒菜',
    key: '南湖春天冒菜',
  },
  {
    label: '剁椒鱼头',
    key: '剁椒鱼头',
    children: [
      {
        label: '大餐',
        key: '大餐',
        type: 'group',
        children: [
          {
            label: '炒腊肉',
            key: '炒腊肉',
          },
          {
            label: '可乐鸡翅',
            key: '可乐鸡翅',
          },
        ],
      },
    ],
  },
  {
    label: '南湖春天串串',
    key: '南湖春天串串',
  },
  {
    label: '南瓜土豆汤',
    key: '南瓜土豆汤',
    icon: () => h(AlarmOutline),
  },
]

const menuCollapsed = ref(false)
</script>

<template>
  <yy-button @click="menuCollapsed = !menuCollapsed">
    {{ menuCollapsed ? "展开" : "收起" }}
  </yy-button>
  <yy-menu
    :options="basicMenuOptions"
    :collapsed="menuCollapsed"
    collapsed-width="50"
  />
</template>

Props ​

参数说明类型默认值
options菜单选项MenuOption[][]
defaultExpandedKeys默认展开的keyArray<string | number | symbol>[]
selectedKeys选中的key值Array<string | number | symbol>[]
collapsed是否收起boolean-
collapsedWidth收起后宽度number | string-

Emits ​

事件名说明回调参数
expanded菜单展开后触发-
collapsed菜单收起后触发-
item-click菜单项被点击时触发MenuItem