Actionsheet 操作菜单

查看 sn-actionsheet 的 2.0 版本差异

基础用法

从底部弹出的操作菜单，用于展示一组操作项供用户选择。

点击操作项后自动关闭并派发选择事件
内置取消按钮与标题，均可按需隐藏
支持操作项文字颜色与禁用状态

必须放在 sn-page 下

本组件为弹出层，需直接放在 sn-page 根节点下使用，否则主题颜色与动画时长等 CSS 变量无法作用到组件内部。

建议直接使用 API

推荐使用 snu.showActionsheet：无需在页面放置组件或绑定 ref，配置字段与组件 props 一致，结果经 success 回调返回；作为整页弹层可覆盖导航栏 / tabbar 并拦截返回键。组件本身不提供插槽，需先放置到页面再通过 ref 调用。

typescript

snu.showActionsheet({
	title: '请选择',
	actions: [{ text: '拍照' }, { text: '相册' }],
	success: (tapIndex) => {}
})

vue

<template>
	<sn-page>
		<sn-button text="打开操作菜单" type="primary" @click="open"></sn-button>
		<sn-actionsheet ref="sheetRef" title="选择操作" :actions="actions"
			@click-item="onClickItem"></sn-actionsheet>
	</sn-page>
</template>

<script lang="uts" setup>
import type { SnDataItem } from '@/uni_modules/sinle-ui/core/types/index.uts'

const sheetRef = ref<SnActionsheetComponentPublicInstance | null>(null)
const actions = ref<SnDataItem[]>([
	{ text: '选项一' },
	{ text: '选项二' },
	{ text: '选项三' }
])

function open(): void {
	sheetRef.value?.$callMethod('open')
}

function onClickItem(item: SnDataItem): void {
	console.log(item.text)
}
</script>

更多演示请下载 demo 查看

自定义操作项

操作项颜色支持 $ 简写，可单独禁用某一项。

vue

<template>
	<sn-actionsheet ref="sheetRef" title="分享到" :actions="actions"></sn-actionsheet>
</template>

<script lang="uts" setup>
import type { SnDataItem } from '@/uni_modules/sinle-ui/core/types/index.uts'

const actions = ref<SnDataItem[]>([
	{ text: '微信', color: '$success' },
	{ text: '朋友圈', color: '$success' },
	{ text: '删除', color: '$error' },
	{ text: '暂不可用', disabled: true }
])
</script>

属性

参数	说明	类型	默认值	可选值
title	操作菜单标题，为空则不显示标题与分隔线	String	`''`	-
actions	操作项数组，每项支持 `text`（文字）、`color`（文字颜色，支持 `$` 简写）、`disabled`（是否禁用）等字段	Array<SnDataItem>	`[]`	-
showCancel	是否显示底部取消按钮	Boolean	`true`	`true` \| `false`
titleColor	标题颜色，支持 `$` 简写	String	`$title`	-
titleSize	标题字号，支持 `$` 简写	String \| Number	`$13`	-
bgColor	面板背景颜色，支持 `$` 简写	String	`$front`	-
cancelText	取消按钮文字	String	`取消`	-
maskOpacity	遮罩透明度	Number	`0.4`	-
aniTime	动画时长（ms），支持 `$` 简写	String \| Number	`$long`	-
preventBack	是否阻止返回键关闭	Boolean	`false`	`true` \| `false`
disabled	是否禁用，禁用后操作项与取消按钮均不可点击	Boolean	`false`	`true` \| `false`
maskClose	点击遮罩时是否关闭	Boolean	`true`	`true` \| `false`
customStyle	自定义面板样式，后应用，优先于 `panelStyle`	SnStyleValue	`''`	-
wrapStyle	自定义外层容器样式	SnStyleValue	`''`	-
wrapClass	外层容器外部类	String	`''`	-
panelStyle	自定义面板样式	SnStyleValue	`''`	-
panelClass	面板外部类	String	`''`	-
itemStyle	自定义操作项样式（透传内部 sn-cell）	SnStyleValue	`''`	-
itemClass	操作项外部类（透传内部 sn-cell）	String	`''`	-
itemBorder	是否显示操作项之间的分隔线	Boolean	`true`	`true` \| `false`
itemHoverStyle	操作项按压时应用的样式	SnStyleValue	`background-color: var(--sn-info)`	-

通用数据项类型，全局弹窗操作菜单与多数列表类组件共用（组件侧详见组件类型）。

字段	类型	必备	描述
id	String	否	项 id
text	String	否	显示文本
icon	String	否	图标名
value	String	否	关联值
color	String	否	文本颜色
disabled	Boolean	否	是否禁用

事件

名称	类型	说明
clickItem	(item: SnDataItem) => Void	点击操作项时触发，参数为所选操作项，随后自动关闭
cancel	() => Void	点击取消按钮（或调用 `cancel` 方法）时触发，随后关闭
clickoverlay	() => Void	点击遮罩时触发
beforeenter	() => Void	入场动画开始前触发
enter	() => Void	入场动画开始时触发
afterenter	() => Void	入场动画结束后触发
beforeleave	() => Void	离场动画开始前触发
leave	() => Void	离场动画开始时触发
afterleave	() => Void	离场动画结束后触发

方法

名称	参数	返回值	描述
open	-	-	打开操作菜单
close	-	-	关闭操作菜单
cancel	-	-	关闭操作菜单并触发 `cancel` 事件

Actionsheet 操作菜单 ​

基础用法 ​

自定义操作项 ​

属性 ​

事件 ​

方法 ​

Actionsheet 操作菜单

基础用法

自定义操作项

属性

事件

方法