ActionSheet 动作面板

EwActionSheet 是移动端「更多操作」的标准形态：底部滑入的纵向动作列表 + 取消栏，替代 hover 类菜单在触屏上的缺位。动作项支持副标题、警示色与禁用；破坏性动作用 color 标红并排在最末。遮罩点击 / ESC / 取消栏均可关闭，before-close 统一拦截。

基础用法

对象操作菜单

点击「更多操作」从底部滑入；点选动作即关闭并回调 select，取消栏回调 cancel。演示壳内需 append-to-body=false，真机保持默认。

9:41

文章详情

Clean Navy 设计语言解读

发布于 09-01 · 设计栏目

vue

<script setup>
import { ref } from 'vue'

const visible = ref(false)
const actions = [
  { name: '分享文章' },
  { name: '编辑', subname: '进入全屏编辑器' },
  { name: '删除', color: 'var(--ew-color-danger)' },
]

function onSelect(action, index) {
  console.log('选中', index, action.name)
}
</script>

<template>
  <EwButton @click="visible = true">更多操作</EwButton>
  <EwActionSheet
    v-model="visible"
    title="文章操作"
    :actions="actions"
    @select="onSelect"
  />
</template>

隐藏取消栏

cancel-text 传空串隐藏取消栏，适合「选择后必须决策」的场景（如分享目标选择）。

无取消栏 + 标题插槽

title 插槽自定义头部，cancel-text 置空。

9:41

vue

<EwActionSheet v-model="visible" cancel-text="">
  <template #title>
    <span>分享到</span>
  </template>
  <ShareTargetList @pick="visible = false" />
</EwActionSheet>

API

名称	类型	默认值	说明
modelValue	boolean	false	显隐（v-model）
actions	`{ name, subname?, color?, disabled? }[]`	[]	动作列表；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	boolean	true	ESC 关闭
append-to-body	boolean	true	Teleport 到 body；嵌套滚动容器/演示壳内置 false
lock-scroll	boolean	true	打开期间锁定页面滚动
before-close	(done) => void	—	关闭前拦截，不调用 done 则阻止

事件

名称	参数	说明
select	(action, index)	点选动作（禁用项不触发）
cancel	—	点击取消栏
open / opened / close / closed	—	显隐流转

插槽

名称	参数	说明
default	—	自定义面板内容（替换动作列表）；列表块不做水平内缩，内容需自带内边距（建议左右 ≥12px，底部留出圆角空间）
title	—	自定义标题

ActionSheet 动作面板 ​

基础用法 ​

隐藏取消栏 ​

API ​

事件 ​

插槽 ​

ActionSheet 动作面板

基础用法

隐藏取消栏

API

事件

插槽