MenuBar 应用菜单栏

AuMenuBar 用于桌面应用窗口顶部的命令菜单。

基础用法

最近执行：尚未选择命令

<template>
  <div class="menu-bar-demo">
    <div class="menu-bar-demo__stage">
      <AuMenuBar :items="items" @select="handleSelect" />
    </div>
    <p class="menu-bar-demo__result">最近执行：{{ lastAction || '尚未选择命令' }}</p>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import { AuMenuBar } from 'aurora-plus';
const lastAction = ref('');
const items = ref([
  {
    label: '文件',
    children: [
      { label: '新建文档', command: 'new', accelerator: 'Ctrl+N' },
      { label: '打开文档', command: 'open', accelerator: 'Ctrl+O' },
      { type: 'separator' },
      { label: '保存', command: 'save', accelerator: 'Ctrl+S' },
    ],
  },
  {
    label: '编辑',
    children: [
      { label: '撤销', command: 'undo', accelerator: 'Ctrl+Z' },
      { label: '重做', command: 'redo', accelerator: 'Ctrl+Y' },
      { type: 'separator' },
      { label: '粘贴为纯文本', command: 'paste-plain', disabled: true },
    ],
  },
  {
    label: '视图',
    children: [
      {
        label: '外观',
        children: [
          { label: '显示行号', command: 'line-numbers', type: 'checkbox', checked: true },
          { label: '专注模式', command: 'focus-mode', type: 'checkbox', checked: false },
        ],
      },
      { label: '实际大小', command: 'actual-size', accelerator: 'Ctrl+0' },
    ],
  },
]);
function handleSelect(item) {
  if (item.type === 'checkbox') item.checked = !item.checked;
  lastAction.value = `${item.label}（${item.command}）`;
}
</script>
<style scoped>
.menu-bar-demo {
  width: 100%;
}
.menu-bar-demo__stage {
  min-height: 190px;
}
.menu-bar-demo__result {
  margin: 12px 8px 0;
  color: var(--au-color-text-secondary);
  font-size: var(--au-font-size-small);
}
</style>

菜单项结构

字段	说明	类型
label	菜单或命令名称	string
command	业务命令标识	unknown
children	子菜单项	Array
icon	菜单项前导图标	Component
accelerator	仅用于展示的快捷键提示	string
disabled	是否禁用	boolean
type	checkbox 表示复选命令，separator 表示分隔线	string
checked	复选命令是否选中	boolean

MenuBar API

Attributes

属性	说明	类型	默认值
items	根菜单及 children 命令项	Array	[]
draggable	将根菜单后的空白区域设为窗口拖拽区	boolean	false

Events

事件名	说明	参数
select	选择可执行叶子菜单项	(item)
open	打开根菜单	(item, index)
close	关闭根菜单	(item, index)