---
url: /mobile/components/action-sheet.md
---
# ActionSheet 动作面板

移动端「更多操作」的标准形态：底部滑入的纵向动作列表 + 取消栏，替代桌面上依赖
hover 的 Dropdown / Popconfirm（见[移动端 · 反馈与浮层](/mobile/feedback)）。动作项
支持副标题、警示色与禁用；破坏性动作用 `color` 标红并排在最末。遮罩点击 / ESC /
取消栏均可关闭，`before-close` 统一拦截；焦点圈禁、滚动锁定与 zIndex 自增与 Drawer
同一套基础设施。

## 基础用法

```html
<eb-button @click="sheetOpen = true">更多操作</eb-button>

<eb-action-sheet
  v-model="sheetOpen"
  title="单据操作"
  :actions="[
    { name: '转发审批' },
    { name: '编辑单据', subname: '进入全屏编辑' },
    { name: '撤回单据', color: 'var(--eb-color-danger)' },
  ]"
  @select="onSelect"
/>
```

```js
function onSelect(action, index) {
  console.log('选中', index, action.name) // close-on-click-action 默认已关闭面板
}
```

要点：

* **破坏性动作**：用 `color` 着警示色并排在动作列表最末，与普通动作保持视觉分离；
  组件不内置「危险二次确认」，撤回/删除类操作建议在 `select` 里再走 Dialog 确认
  （见[移动端 · 危险操作确认](/mobile/feedback)）。
* **舞台/嵌套滚动容器**：演示壳内置 `:append-to-body="false"`（并配 `:lock-scroll="false"` 防止锁文档页滚动）（弹层留在原地被舞台
  裁剪）；真机页面保持默认 Teleport 到 body 即可。

## 自定义面板内容

`default` 插槽替换动作列表（如分享目标九宫格）；`title` 插槽自定义标题；
`cancel-text` 传空串隐藏取消栏，适合「选择后必须决策」的场景。

## API