ActionSheet 动作面板
注：使用方法待进一步完善
示例
基础用法
<script lang="ts">
let visible = $state([false, false])
</script>
<Button class="border" onclick={() => (visible[0] = true)}>最简单的用法</Button>
<Button class="border" onclick={() => (visible[1] = true)}>标题与取消按钮</Button>
<ActionSheet bind:visible={visible[0]} actions={['动作1', '动作2']} {onAction} />
<ActionSheet
bind:visible={visible[1]}
header="动作面板"
actions={['动作1', '动作2']}
cancel="取消"
{onAction}
/>
ActionSheet
属性
| 属性 |
说明 |
类型 |
默认值 |
| visible |
是否显示 |
boolean |
$bindable(false) |
| header |
标题 |
string | Snippet |
undefined |
| actions |
动作条目 |
Array |
必填 |
| actionSnippet |
动作条目的模板 |
Snippet<[any, number]> |
undefined |
| cancel |
取消按钮文本。不提供则不显示取消按钮。 |
string |
undefined |
| noMask |
不展示遮罩 |
boolean |
false |
| keepOpenOnClickMask |
阻止点击遮罩关闭 |
boolean |
false |
事件
| 事件 |
说明 |
类型 |
| onAction |
点击选项时触发 |
(action: any, index: number) => void |
| onCancel |
取消时触发 |
() => void |