ActionSheet 动作面板

介绍

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

基础用法

通过 v-model 控制展示，通过 options 配置操作项。

<vd-action-sheet v-model="show" :options="options" />

import type { ActionSheetOption } from 'vital-design';

const show = ref(false);
const options: ActionSheetOption[] = [
  { title: '选项一' },
  { title: '选项二' },
  { title: '选项三' },
];

展示取消按钮

通过 cancel-show 展示取消按钮。

<vd-action-sheet
  v-model="show"
  :options="options"
  cancel-show
/>

展示标题与描述

通过 title、description 设置标题与描述信息。

<vd-action-sheet
  v-model="show"
  title="标题"
  description="描述信息"
  :options="options"
  cancel-show
/>

API

Props

参数	说明	类型	默认值
v-model	是否展示	boolean	-
title	标题	string	-
description	描述	string	-
options	操作项	ActionSheetOption[]	[]
cancel-show	是否展示取消按钮	boolean	false
cancel-text	取消按钮文本	string	-
round	是否显示圆角	boolean	true
overlay	是否展示遮罩层	boolean	true
overlay-class	遮罩层类名	ClassValue	-
overlay-style	遮罩层样式	StyleValue	-
close-on-click-overlay	点击遮罩层时关闭	boolean	true
z-index	层级	string | number	2001+
lazy-render	是否懒渲染	boolean	true
lock-scroll	是否锁定背景	boolean	true

代替原始 Props

参数	说明	类型	默认值
custom-id	根节点 id	string	-
custom-class	根节点类名	ClassValue	-
custom-style	根节点样式	StyleValue	-

Events

事件名	说明	回调参数
click	点击时触发	MouseEvent
update:model-value	展示状态更新时触发	boolean
open	打开时触发	-
opened	打开动画结束时触发	-
close	关闭时触发	-
closed	关闭动画结束时触发	-
click-overlay	点击遮罩时触发	MouseEvent
click-option	点击操作项时触发	ActionSheetOnClickOptionEvent
click-cancel	点击取消按钮时触发	MouseEvent

Slots

名称	说明
title	标题
description	描述
default	操作项列表
option	自定义操作项，作用域参数 option、index
option-loading	操作项加载中
option-icon	操作项图标
option-text	操作项文本
cancel	取消按钮

类型定义

组件导出以下类型定义：

import type {
  ActionSheetOption,
  ActionSheetOnClickOptionEvent,
} from 'vital-design';