Pixelium Designv0.2.1

中文

English

中文

English

Appearance

菜单 Menu ​

要吃东西。

基本用法 ​

通过 Menu、MenuItem、MenuGroup、Submenu 组织菜单结构。MenuItem 接收 href 或 route 参数的时候，渲染围为 <a> 标签或者 Vue Router 的 RouterLink 组件。

WARNING

href 和 route 属性将直接渲染到 <a> 标签中，如果传递类似 javascript:alert(1) 这样的值或恶意 URL，可能会导致 XSS 或开放重定向漏洞。

隐藏源代码

横向菜单 ​

设置 direction 为 "horizontal" 时，展示横向菜单，ellipsis 为 true 时溢出的菜单项会自动收纳到 ... 子菜单中。

隐藏源代码

折叠侧栏 ​

侧边栏场景可使用 collapsed 属性以缩略展示菜单。

隐藏源代码

分组与子菜单 ​

结合 MenuGroup 与 Submenu 构建多层菜单结构。

隐藏源代码

强调菜单 ​

设置 Menu dark 属性为 true 开启高对比度的深色模式。

隐藏源代码

选项属性 ​

Menu 的 options 属性用于直接传入选项，可以用于简单菜单的快速创建，选项的字符串值和 index 字段作为菜单子组件的唯一标识，推荐确保它们的唯一性。

隐藏源代码

受控模式 ​

通过传入 active 和 expanded 控制选中菜单和展开菜单，支持 v-model。不传或为 undefined 则为非受控模式，此时可以通过 defaultActive 和 defaultExpanded 设置默认值。

Active: 1 | Expanded: [ "2" ]
隐藏源代码

自定义插槽内容 ​

Menu、MenuItem、Submenu 和 MenuGroup 组件提供了多个插槽用于自定义内容。使用 default 插槽（MenuItem）或 label 插槽（Submenu、MenuGroup）可以展示带有标题和描述的复杂菜单项，实现多行展示效果。

隐藏源代码

API ​

属性类型可选默认值描述版本
direction'horizontal' | 'vertical'是'vertical'菜单的方向0.1.0
darkboolean是false菜单是否为深色模式。0.1.0
activenumber | string | symbol | null是激活的菜单项，支持 v-model 受控模式。0.1.0
defaultActivenumber | string | symbol | null是激活的菜单项的默认值，非受控模式。0.1.0
expanded(number | string | symbol)[] | null是展开的子菜单，支持 v-model 受控模式。0.1.0
defaultExpanded(number | string | symbol)[] | null是展开的子菜单默认值，非受控模式。0.1.0
collapsedboolean是false垂直菜单是否折叠。0.1.0
submenuMode'inline' | 'popover'是'inline'子菜单展示方式，若子菜单 mode 未设置将采用该值。0.1.0
submenuTrigger'hover' | 'click'是'hover'子菜单浮窗的触发方式，若子菜单 trigger 未设置将采用该值。0.1.0
indentnumber是16每级菜单的缩进。0.1.0
ellipsisboolean是true横向菜单超出部分是否收纳到 ... 子菜单中。0.1.0
options(string | MenuOption | MenuGroupOption | SubmenuOption)[]是用于创建菜单子组件的选项，当未传入 default 插槽时生效。0.1.0
事件参数描述版本
update:activevalue: number | string | symbol更新 active 的回调。0.1.0
update:expandedvalue: (number | string | symbol)[]更新 expanded 的回调。0.1.0
selectindex: number | string | symbol, event: MouseEvent选中菜单的回调。0.1.0
expandChangevalue: (number | string | symbol)[], event: MouseEvent展开的子菜单变化的回调。0.1.0
expandindex: number | string | symbol, event: MouseEvent展开一个子菜单时触发的回调。0.1.0
foldindex: number | string | symbol, event: MouseEvent折叠一个子菜单时触发的回调。0.1.0
插槽参数描述版本
default构成菜单的子组件们。0.1.0
属性类型可选默认值描述版本
labelstring是文本标签。0.1.0
indexnumber | string | symbol否唯一标识，MenuItem 和 Submenu 组件的 index 属性不可重复。0.1.0
disabledboolean是false是否禁用。0.1.0
routestring | object是Vue Router 的 RouterLink 的 to 参数，传入后，将以 RouterLink 作为 <a> 渲染文本标签。如果使用该属性，请确保在全局的 Vue App 中注册 Vue Router。0.1.0
hrefstring是<a> 标签的 href 属性，传入 href 参数时，将以 <a> 标签渲染文本标签。0.1.0
targetstring是<a> 标签的 target 属性。0.1.0
插槽参数描述版本
default文本标签。0.1.0
icon图标。0.1.0
属性类型可选默认值描述版本
labelstring是文本标签。0.1.0
indexnumber | string | symbol否唯一标识，MenuItem 和 Submenu 组件的 index 属性不可重复。0.1.0
disabledboolean是false是否禁用。0.1.0
modeboolean是子菜单展示方式，inline 为内联的下拉子菜单，popover 为弹出框展示的浮窗子菜单。值为 inline 只在垂直菜单中和非浮窗子菜单中生效。0.1.0
triggerboolean是子菜单的浮窗触发方式。0.1.0
popoverPropsOmit<PopoverProps, 'visible' | 'defaultVisible' | 'content'> & EmitEvent<PopoverEvents>是内部 Popover 的属性。0.1.0
插槽参数描述版本
default构成菜单的子组件们。0.1.0
label文本标签。0.1.0
icon图标。0.1.0
属性类型可选默认值描述版本
labelstring是文本标签。0.1.0
插槽参数描述版本
default构成菜单的子组件们。0.1.0
label文本标签。0.1.0
ts
export interface MenuOption extends NavigationOption {
	disabled?: boolean
	href?: string
	route?: string | object
	target?: string
	icon?: () => ValidVNodeContent
}

export interface MenuGroupOption extends NavigationOption {
	children: (string | MenuOption | MenuGroupOption | SubmenuOption)[]
	type: 'group'
}

export interface SubmenuOption extends NavigationOption {
	children: (string | MenuOption | MenuGroupOption | SubmenuOption)[]
	disabled?: boolean
	type: 'submenu'
	icon?: () => ValidVNodeContent
}

export interface NavigationOption {
	index: string | number | symbol
	label?: string
}
export type ValidVNodeContent = (...args: any[]) => VNode | JSX.Element

EmitEvent ​

ts
export type EmitEvent<T extends Record<string, any>> = {
	[K in keyof T as `on${Capitalize<K & string>}`]?: (...args: T[K]) => void
}