ActionSheet 动作面板

Feedback · Interactive component

Action option sheets.

On-demand importwbbb-ui/components/action-sheet

Basic Usage

Example code

<script setup lang="ts">
import { showActionSheet } from 'wbbb-ui/services/action-sheet'

function open() { showActionSheet('Saved successfully') }
</script>

<template><button @click="open">Open ActionSheet</button></template>

Live mobile previewOpen in a new tab ↗

States and Interaction

All listed states can be operated and verified in the live Playground preview.

DefaultPressed选中Disabled

Service components use <wbbb-overlay-host /> for library visuals and fall back to uni-app native capability without a host.

API Reference

Props

Property	Description	Type	Default	Required
actions	Defines the available action items.	WbbbActionSheetAction[]	() => []	No
cancelText	Overrides the cancel action label.	string	由 locale 决定	No
locale	Overrides the locale used for built-in display copy.	WbbbLocaleInput	—	No
modelValue	Provides the current value used by v-model.	boolean	false	No
title	Sets the component title text.	string	''	No

Events

• update:modelValue
• cancel
• close
• select

Slots

None

Two-way binding

Supports v-model (modelValue).

Platform Notes

Build verification: H5, App Vue, WeChat Mini Program, Alipay Mini Program, and Douyin Mini Program.

Runtime differences: H5 supports keyboard focus and reduced motion. Mini Programs provide equivalent touch interaction; verify upload, date selection, and overlays on target platforms.

Usage note: Service APIs can be used without full installation and are queued by Overlay Host.