介绍

提供多个菜单项供选择。

代码演示

基础使用

最简单的用法，通过 label 和 value 属性配置菜单项。

vue ts

<template>
  <s-menu @select="onSelect">
    <s-menu-item :value="1" label="选项1" />
    <s-menu-item :value="2" label="选项2" />
    <s-menu-item :value="3" label="选项3" />
  </s-menu>
</template>

<script setup lang="ts">
import { toast, type MenuItemProps } from 'sard'

const onSelect = (props: MenuItemProps) => {
  toast(props.label!)
}
</script>

vue js

<template>
  <s-menu @select="onSelect">
    <s-menu-item :value="1" label="选项1" />
    <s-menu-item :value="2" label="选项2" />
    <s-menu-item :value="3" label="选项3" />
  </s-menu>
</template>

<script setup lang="js">
import { toast } from 'sard'
const onSelect = (props) => {
  toast(props.label)
}
</script>

暗黑模式

设置 theme="dark" 使用深色主题。

vue ts

<template>
  <s-menu theme="dark" @select="onSelect">
    <s-menu-item :value="1" label="选项1" />
    <s-menu-item :value="2" label="选项2" />
    <s-menu-item :value="3" label="选项3" />
  </s-menu>
</template>

<script setup lang="ts">
import { toast, type MenuItemProps } from 'sard'

const onSelect = (props: MenuItemProps) => {
  toast(props.label!)
}
</script>

vue js

<template>
  <s-menu theme="dark" @select="onSelect">
    <s-menu-item :value="1" label="选项1" />
    <s-menu-item :value="2" label="选项2" />
    <s-menu-item :value="3" label="选项3" />
  </s-menu>
</template>

<script setup lang="js">
import { toast } from 'sard'
const onSelect = (props) => {
  toast(props.label)
}
</script>

展示图标

通过 icon 插槽在菜单项中展示图标。

vue ts

<template>
  <s-menu theme="dark" @select="onSelect">
    <s-menu-item :value="1" label="选项1" #icon>
      <demo-icon name="upc-scan" />
    </s-menu-item>
    <s-menu-item :value="2" label="选项2" #icon>
      <demo-icon name="camera" />
    </s-menu-item>
    <s-menu-item :value="3" label="选项3" />
  </s-menu>
</template>

<script setup lang="ts">
import { toast, type MenuItemProps } from 'sard'

const onSelect = (props: MenuItemProps) => {
  toast(props.label!)
}
</script>

vue js

<template>
  <s-menu theme="dark" @select="onSelect">
    <s-menu-item :value="1" label="选项1" #icon>
      <demo-icon name="upc-scan" />
    </s-menu-item>
    <s-menu-item :value="2" label="选项2" #icon>
      <demo-icon name="camera" />
    </s-menu-item>
    <s-menu-item :value="3" label="选项3" />
  </s-menu>
</template>

<script setup lang="js">
import { toast } from 'sard'
const onSelect = (props) => {
  toast(props.label)
}
</script>

禁用选项

设置 disabled 属性禁用菜单项，禁用的项不可点击。

vue ts

<template>
  <s-menu @select="onSelect">
    <s-menu-item :value="1" label="选项1" disabled />
    <s-menu-item :value="2" label="选项2" disabled />
    <s-menu-item :value="3" label="选项3" />
  </s-menu>
</template>

<script setup lang="ts">
import { toast, type MenuItemProps } from 'sard'

const onSelect = (props: MenuItemProps) => {
  toast(props.label!)
}
</script>

vue js

<template>
  <s-menu @select="onSelect">
    <s-menu-item :value="1" label="选项1" disabled />
    <s-menu-item :value="2" label="选项2" disabled />
    <s-menu-item :value="3" label="选项3" />
  </s-menu>
</template>

<script setup lang="js">
import { toast } from 'sard'
const onSelect = (props) => {
  toast(props.label)
}
</script>

水平排列

设置 direction="horizontal" 使菜单水平排列，同时支持图标插槽。

vue ts

<template>
  <s-menu direction="horizontal" @select="onSelect">
    <s-menu-item :value="1" label="选项1" #icon>
      <demo-icon name="upc-scan" />
    </s-menu-item>
    <s-menu-item :value="2" label="选项2" #icon>
      <demo-icon name="camera" />
    </s-menu-item>
    <s-menu-item :value="3" label="选项3" />
  </s-menu>
</template>

<script setup lang="ts">
import { toast, type MenuItemProps } from 'sard'

const onSelect = (props: MenuItemProps) => {
  toast(props.label!)
}
</script>

vue js

<template>
  <s-menu direction="horizontal" @select="onSelect">
    <s-menu-item :value="1" label="选项1" #icon>
      <demo-icon name="upc-scan" />
    </s-menu-item>
    <s-menu-item :value="2" label="选项2" #icon>
      <demo-icon name="camera" />
    </s-menu-item>
    <s-menu-item :value="3" label="选项3" />
  </s-menu>
</template>

<script setup lang="js">
import { toast } from 'sard'
const onSelect = (props) => {
  toast(props.label)
}
</script>

API

MenuProps

属性	描述	类型	默认值
direction	排列方向	'vertical' | 'horizontal'	'vertical'
theme	主题风格	'dark' | 'light'	'light'

MenuSlots

插槽	描述
default	默认插槽，用于放置 MenuItem 组件

MenuEmits

事件	描述	类型
select	选择菜单项时触发	(item: any) => void

MenuItemProps

属性	描述	类型	默认值
label	菜单项标签	string | number	-
value	菜单项的值	any	-
disabled	是否禁用	boolean	-

MenuItemSlots

插槽	描述
default	默认插槽，显示标签内容
icon	图标插槽

MenuItemEmits

事件	描述	类型
click	点击菜单项时触发	(event: MouseEvent) => void

主题定制

样式变量

CSS 变量	值
--s-menu-bg	var(--s-white)
--s-menu-item-radius	var(--s-border-radius)
--s-menu-item-height	var(--s-content-height)
--s-menu-item-padding-x	var(--s-content-padding-x)
--s-menu-item-font-size	var(--s-font-size)
--s-menu-item-bg-active	var(--s-bg-color-active)
--s-menu-border-color	var(--s-border-color)
--s-menu-item-bg-active-dark	var(--s-gray-900)
--s-menu-item-color-dark	var(--s-white)
--s-menu-border-color-dark	var(--s-gray-700)
--s-menu-bg-dark	var(--s-gray-800)
--s-menu-item-horizontal-height	var(--s-content-height-xs)
--s-menu-icon-font-size	var(--s-font-size)
--s-menu-icon-gap	var(--s-size-sm)
--s-menu-icon-horizontal-gap	var(--s-size-xs)