1.0.1 • Published 8 months ago
@tomoeed/vue-menu v1.0.1
VueMenu
vue3 菜单组件
组件目前未实现菜单栏垂直排列与菜单水平排列的键盘交互
安装
npm install @tomoeed/vue-menu --save使用
<script setup>
import { Context, Menu, Menuitem } from '@tomoeed/vue-menu';
</script>
<template>
<Context #default="{ triggerProps, triggerRef, menuRef }">
<button type="button" v-bind="triggerProps" :ref="triggerRef">Open menu</button>
<Menu :ref="menuRef">
<Menuitem>menuitem</Menuitem>
<Menuitem>menuitem</Menuitem>
</Menu>
</Context>
</template>组件
Context
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| defaultOpen | boolean | false | 菜单是否默认打开 |
| placement | Placement | bottom-start | right-start | 菜单默认放置位置为 bottom-start, 如果是子菜单则为 right-start |
| 插槽 | 参数 | 说明 |
|---|---|---|
| default | { status: boolean; toggle: (value?: boolean, relatedEvent?: Event) => void; menuRef: function ref]; triggerRef: function ref; triggerProps: object; } |
用户需要提供一个菜单触发按钮, 并将 triggerProps 和 triggerRef 属性传递到该按钮, 同时将 menuRef 属性传递到 <Menu> 组件
<Context #default="{ triggerProps, triggerRef, menuRef }">
<button type="button" v-bind="triggerProps" :ref="triggerRef">Open menu</button>
<Menu :ref="menuRef"></Menu>
</Context>Menu
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| orientation | horizontal | vertical | vertical | 菜单排列方向 |
Menuitem
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| modelValue(v-model) | string | boolean | Array | Set | 类型为 radio 或 checkbox 时, 支持 v-model radio 只支持 string checkbox 支持 boolean Array<string> Set<string> | |
| type | command | radio | checkbox | command | 菜单项类型 |
| disabled | boolean | false | |
| command | number | string | object | command 事件参数 | |
| name | string | 类型为 radio 或 checkbox 时, 需要该参数 | |
| value | string | 类型为 radio 或 checkbox 时, 需要该参数 | |
| defaultChecked | boolean | false | 类型为 radio 或 checkbox 时, 如果未使用 v-model, 使用该参数设置组件选中状态 |
| 插槽 | 参数 | 说明 |
|---|---|---|
| as | object | 如果你想渲染自定义元素, 可以使用这个插槽 |
| default | ||
| leading | 可用于显示菜单项图标, 如果菜单项类型为 radio 或 checkbox, 则不会渲染该插槽 | |
| trailing | 该插槽可用于显示与菜单项相关的值, 如: 菜单栏快捷键 | |
| description | 菜单项描述 |
<Menuitem #as="props">
<RouterLink v-bind="props">Link</RouterLink>
</Menuitem>Anchor
子菜单触发按钮
| 插槽 | 参数 | 说明 |
|---|---|---|
| default | ||
| leading | 可用于显示菜单项图标 | |
| description | 菜单项描述 |
<Context>
<Menuitem></Menuitem>
<Context>
<Anchor></Anchor>
<Menu></Menu>
</Context>
</Context>Divider
菜单项分割线
<Context>
<button type="button"></button>
<Menu>
<Menuitem></Menuitem>
<Divider/>
<Menuitem></Menuitem>
</Menu>
</Context>Menubar
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| orientation | horizontal | vertical | vertical | 菜单排列方向 |
菜单栏中的菜单项需要手动添加 role="menuitem" 属性, 如果是使用 <Context> 创建的菜单则不需要添加该属性
<Menubar>
<button type="button" role="menuitem">Button</button>
<Context>
<button type="button">Open menu</button>
<Menu></Menu>
</Context>
</Menubar>