MenuList 菜单列表

AuMenuList 与 AuMenuListItem 用于苹果式分组菜单、设置入口和带尾部控件的配置行。

基础用法

当前选择：尚未选择

• 自动播放打开视频后立即开始播放
• 循环播放播放结束后从头继续

<template>
  <div class="menu-list-demo">
    <AuMenuList>
      <AuMenuListItem
        v-for="item in menuItems"
        :key="item.id"
        :title="item.title"
        :description="item.description"
        accessory="chevron"
        clickable
        @click="selectedItem = item.title"
      />
    </AuMenuList>
    <p class="menu-list-demo__result">当前选择：{{ selectedItem || '尚未选择' }}</p>
    <AuMenuList>
      <AuMenuListItem title="自动播放" description="打开视频后立即开始播放">
        <template #trailing>
          <AuSwitch v-model="autoplay" />
        </template>
      </AuMenuListItem>
      <AuMenuListItem title="循环播放" description="播放结束后从头继续">
        <template #trailing>
          <AuSwitch v-model="loopPlayback" />
        </template>
      </AuMenuListItem>
    </AuMenuList>
    <AuMenuList :divided="false">
      <AuMenuListItem
        title="清除最近记录"
        description="移除当前设备保存的历史记录"
        :leading-icon="IconTrash"
        leading-variant="tinted"
        tone="danger"
        shortcut="Shift Del"
        clickable
        @click="selectedItem = '清除最近记录'"
      />
    </AuMenuList>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import { AuMenuList, AuMenuListItem, AuSwitch } from 'aurora-plus';
import { IconTrash } from 'aurora-plus/icons';
const selectedItem = ref('');
const autoplay = ref(true);
const loopPlayback = ref(false);
const menuItems = [
  { id: 'trim', title: '视频剪切', description: '截取片段，快速无损导出' },
  { id: 'subtitle', title: '添加字幕', description: '导入 SRT / ASS / SSA 并开关字幕轨' },
  { id: 'watermark', title: '视频去水印', description: '框选区域，强模糊覆盖水印' },
  { id: 'convert', title: '格式转换', description: 'MP4、MKV、MOV 快速转换' },
];
</script>
<style scoped>
.menu-list-demo {
  display: grid;
  width: min(100%, 520px);
  gap: 18px;
}
.menu-list-demo__result {
  margin: -8px 4px 0;
  color: var(--au-color-text-secondary);
  font-size: var(--au-font-size-small);
}
</style>

AuMenuList API

Attributes

属性	说明	类型	默认值
density	行密度，可选 compact / default / relaxed	string	default
divided	是否显示内缩分隔线	boolean	true
elevated	是否显示表面阴影	boolean	true

Slots

插槽名	说明
default	放置 AuMenuListItem

AuMenuListItem API

Attributes

属性	说明	类型	默认值
title	主标题	string	''
description	次级说明	string	''
leadingIcon	前导图标组件	Component	null
leadingVariant	图标样式，可选 plain / tinted	string	plain
tone	语义色，可选 default / primary / success / warning / danger	string	default
accessory	尾部标识，可选 none / chevron	string	none
clickable	是否渲染为可操作按钮	boolean	false
href	设置后渲染为链接	string	''
target	链接打开目标	string	''
rel	链接 rel	string	''
disabled	是否禁用	boolean	false
selected	是否显示选中状态	boolean	false
shortcut	尾部快捷键文本	string	''

Events

事件名	说明	参数
click	可用菜单项被点击	(event)

Slots

插槽名	作用域参数	说明
default	—	自定义标题内容
title	—	自定义主标题
description	—	自定义次级说明
leading		自定义前导内容
trailing		尾部控件或状态