ActionSheet 动作面板

底部弹起的模态面板，包含与当前情境相关的多个选项。

引入

通过 easycom 自动引入，无需手动注册。

代码演示

基础用法

通过 actions 属性设置选项列表，v-model:show 控制显示。

<zq-button text="基础用法" @click="show = true" />
<zq-action-sheet
  v-model:show="show"
  :actions="actions"
  @select="onSelect"
/>

const show = ref(false)
const actions = [
  { name: '选项一' },
  { name: '选项二' },
  { name: '选项三' },
]

function onSelect({ item, index }) {
  console.log('选中:', item.name, index)
}

展示标题和描述

通过 title 和 description 属性设置标题和描述信息。

<zq-action-sheet
  v-model:show="show"
  title="标题"
  description="这是一段描述信息"
  :actions="actions"
/>

展示取消按钮

通过 cancel-text 属性设置取消按钮文字。

<zq-action-sheet
  v-model:show="show"
  :actions="actions"
  cancel-text="取消"
  @cancel="onCancel"
/>

选项状态

选项支持 disabled（禁用）、loading（加载中）、color（自定义颜色）和 subname（副标题）。

<zq-action-sheet
  v-model:show="show"
  :actions="[
    { name: '着色选项', color: '#ee0a24' },
    { name: '禁用选项', disabled: true },
    { name: '加载选项', loading: true },
    { name: '带描述', subname: '描述信息' },
  ]"
/>

点击选项后不关闭

通过 :close-on-click-action="false" 设置点击选项后不自动关闭。

<zq-action-sheet
  v-model:show="show"
  :actions="actions"
  :close-on-click-action="false"
/>

API

Props

参数	说明	类型	默认值
v-model:show	是否展示动作面板	boolean	false
title	面板标题	string	''
description	面板描述	string	''
actions	选项列表	ActionItem[]	[]
cancel-text	取消按钮文字	string	''
close-on-click-action	点击选项后是否关闭	boolean	true

ActionItem 数据结构

键名	说明	类型
name	选项名称	string
subname	选项描述	string
color	选项文字颜色	string
disabled	是否禁用	boolean
loading	是否显示加载状态	boolean

Events

事件名	说明	回调参数
select	点击选项时触发（禁用或加载状态下不触发）	{ item: ActionItem, index: number }
cancel	点击取消按钮时触发	-
close	面板关闭时触发	-

注意事项

• 组件基于 zq-popup 实现，从底部弹出并带有圆角。
• 底部包含安全区域适配（safe-area-inset-bottom）。
• 取消按钮与选项列表之间有间隔区分。

主题定制

变量名	说明
--color-bg-card	面板背景色
--color-bg-page	取消按钮间隔区域背景色
--color-bg-hover	选项点击态背景色
--color-text-primary	标题/选项文字颜色
--color-text-secondary	描述/取消按钮文字颜色
--color-text-disabled	禁用选项文字颜色
--color-divider	选项分割线颜色