移动端专属组件
ActionSheet 动作面板
移动端「更多操作」的标准形态：底部滑入的纵向动作列表 + 取消栏，替代桌面上依赖 hover 的 Dropdown / Popconfirm（见移动端 · 反馈与浮层）。动作项 支持副标题、警示色与禁用；破坏性动作用 color 标红并排在最末。遮罩点击 / ESC / 取消栏均可关闭，before-close 统一拦截；焦点圈禁、滚动锁定与 zIndex 自增与 Drawer 同一套基础设施。
基础用法
9:41
报销单 CL-0908-01审批中
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 确认 （见移动端 · 危险操作确认）。 - 舞台/嵌套滚动容器：演示壳内置
:append-to-body="false"（并配:lock-scroll="false"防止锁文档页滚动）（弹层留在原地被舞台 裁剪）；真机页面保持默认 Teleport 到 body 即可。
自定义面板内容
default 插槽替换动作列表（如分享目标九宫格）；title 插槽自定义标题； cancel-text 传空串隐藏取消栏，适合「选择后必须决策」的场景。
9:41
API
ActionSheet Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| v-model | 显隐（源 prop 为 modelValue） | boolean | false |
| actions | 动作列表 | { name, subname?, color?, disabled? }[] | [] |
| title | 顶部标题，空且无插槽时不渲染 | string | |
| cancel-text | 取消栏文案，空串隐藏 | string | 取消 |
| round | 顶部大圆角 | boolean | true |
| close-on-click-action | 点选动作后关闭 | boolean | true |
| close-on-click-modal | 点击遮罩关闭 | boolean | true |
| close-on-press-escape | ESC 关闭 | boolean | true |
| append-to-body | Teleport 到 body；嵌套滚动容器/演示壳内置 false | boolean | true |
| lock-scroll | 打开期间锁定页面滚动 | boolean | true |
| before-close | 关闭前拦截，不调用入参 done 则阻止 | (done) => void | — |
ActionSheet Events
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| select | 点选动作（禁用项不触发） | (action, index) => void | — |
| cancel | 点击取消栏 | — | — |
| open / opened / close / closed | 显隐流转 | — | — |
ActionSheet Slots
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| default | 自定义面板内容（替换动作列表）；列表块不做水平内缩，内容需自带内边距（建议左右 ≥12px，底部留出圆角空间） | — | 动作列表 |
| title | 自定义标题 | — | title 文案 |