ActionSheet 动作面板

从底部弹出的菜单列表，提供多个操作选项

演示

9:41

代码示例

<!-- 操作 -->
  <re-button theme="primary" @click="visible = true">打开动作面板</re-button>

<!-- 事件日志 -->
  <re-action-sheet :key="current" :visible="visible" :title="currentConfig.title" :description="currentConfig.description" :show-cancel="currentConfig.showCancel" :cancel-text="currentConfig.cancelText" :items="currentConfig.items" :close-on-click-overlay="currentConfig.closeOnClickOverlay" @update:visible="onVisibleChange" @selected="onSelect" @cancel="onCancel" @close="onClose" />

引入

推荐使用 easycom 模式，配置后无需手动 import 即可直接使用 <re-action-sheet />。

API

ActionSheet Props

名称	类型	默认值	描述	必传
visible	`boolean`	false	-	N
items	`Array<ActionSheetItem>`	as Array<ActionSheetItem>	-	N
title	`string`	''	标题	N
description	`string`	''	-	N
cancelText	`string`	'取消'	-	N
showCancel	`boolean`	true	-	N
closeOnClickOverlay	`boolean`	true	-	N
customStyle	`string`	''	自定义样式	N

ActionSheet Events

名称	参数	描述
update:visible	value: boolean	显隐变化时触发
selected	index: number, item: ActionSheetItem	选中时触发
cancel	-	取消时触发
close	-	关闭时触发

ActionSheet Slots

名称	描述
default	默认插槽

Watermark 水印

水印组件，在页面上添加文字或图片水印

Dialog 对话框

用于显示重要信息或需要用户确认操作的模态对话框

内容锚点

演示
代码示例
引入
API