ActionSheet 操作菜单

17:06

说明

基于 ux-popup 从底部弹出的操作菜单，用 list 数组描述选项，支持副标题 subText、disabled 禁用与逐项配色，顶部可加 tips 提示、底部可关掉取消按钮。点击选项派发 click(index) 后默认自动关闭，传 asyncClose 可改为由调用方自行关闭；list 为空时改用默认插槽承载自定义内容。

兼容性

平台	支持情况
App	✅ 支持（tips 未显式传 fontSize 时组件兜底 13px；App 端 font-size:auto 解析异常会使标题塌陷）
H5	✅ 支持
微信小程序	✅ 支持

示例

基础用法

list 配置选项，点击触发 click 事件。

查看源码

<template>
    <ux-button @click="show = true">打开操作菜单</ux-button>
    <ux-action-sheet v-model="show" :list="list" @click="onItemClick"></ux-action-sheet>
</template>

<script setup lang="uts">
import type { ActionSheetItem } from '@/uni_modules/uview-pro-x';

const show = ref<boolean>(false);

const list: ActionSheetItem[] = [
    { text: '拍照' },
    { text: '从相册选择' },
    { text: '取消' }
];

function onItemClick(index: number): void {
    uni.showToast({ title: '点击了: ' + index, icon: 'none' });
}
</script>

提示文字

通过 tips 属性设置顶部提示文字。

查看源码

<template>
    <ux-button @click="show = true">打开操作菜单</ux-button>
    <ux-action-sheet v-model="show" :list="list" :tips="{ text: '选择操作方式' }" @click="onItemClick"></ux-action-sheet>
</template>

<script setup lang="uts">
import type { ActionSheetItem } from '@/uni_modules/uview-pro-x';

const show = ref<boolean>(false);

const list: ActionSheetItem[] = [
    { text: '拍照' },
    { text: '从相册选择' },
    { text: '取消' }
];

function onItemClick(index: number): void {
    uni.showToast({ title: '点击了: ' + index, icon: 'none' });
}
</script>

副标题

list 项可设置 subText 显示副标题描述。

查看源码

<template>
    <ux-button @click="show = true">打开操作菜单</ux-button>
    <ux-action-sheet v-model="show" :list="list" @click="onItemClick"></ux-action-sheet>
</template>

<script setup lang="uts">
import type { ActionSheetItem } from '@/uni_modules/uview-pro-x';

const show = ref<boolean>(false);

const list: ActionSheetItem[] = [
    { text: '拍照', subText: '拍摄一张新照片' },
    { text: '从相册选择', subText: '从手机相册中选择' }
];

function onItemClick(index: number): void {
    uni.showToast({ title: '点击了: ' + index, icon: 'none' });
}
</script>

禁用选项

list 项设置 disabled=true 禁用点击。

查看源码

<template>
    <ux-button @click="show = true">打开操作菜单</ux-button>
    <ux-action-sheet v-model="show" :list="list" @click="onItemClick"></ux-action-sheet>
</template>

<script setup lang="uts">
import type { ActionSheetItem } from '@/uni_modules/uview-pro-x';

const show = ref<boolean>(false);

const list: ActionSheetItem[] = [
    { text: '编辑' },
    { text: '删除', disabled: true },
    { text: '分享' }
];

function onItemClick(index: number): void {
    uni.showToast({ title: '点击了: ' + index, icon: 'none' });
}
</script>

无取消按钮

cancel-btn=false 隐藏底部取消按钮。

查看源码

<template>
    <ux-button @click="show = true">打开操作菜单</ux-button>
    <ux-action-sheet v-model="show" :list="list" :cancel-btn="false" @click="onItemClick"></ux-action-sheet>
</template>

<script setup lang="uts">
import type { ActionSheetItem } from '@/uni_modules/uview-pro-x';

const show = ref<boolean>(false);

const list: ActionSheetItem[] = [
    { text: '拍照' },
    { text: '从相册选择' }
];

function onItemClick(index: number): void {
    uni.showToast({ title: '点击了: ' + index, icon: 'none' });
}
</script>

API

Props

属性	说明	类型	默认值	版本
customStyle	自定义根节点样式	UTSJSONObject	-	-
customClass	自定义根节点样式类	string	''	-
maskCloseAble	是否可以通过点击遮罩关闭	boolean	true	-
list	选项列表，每项含 text / subText / disabled / color / fontSize	ActionSheetItem[]	-	-
tips	顶部提示，含 text / color / fontSize	ActionSheetTips	-	-
cancelBtn	是否显示底部取消按钮	boolean	true	-
safeAreaInsetBottom	是否开启底部安全区适配	boolean	true	-
modelValue	控制弹窗显隐（v-model）	boolean	false	-
borderRadius	弹窗圆角，单位px	string | number	0	-
zIndex	层级 z-index	string | number	0	-
cancelText	取消按钮文案，不传时走组件内置文案	string	''	-
color	选项文字颜色	string	''	-
fontSize	选项文字大小，单位px	string | number	'16px'	-
asyncClose	点击选项后是否只派发 click，由调用方自行关闭	boolean	false	-

Events

事件名	说明	回调参数	版本
click	点击选项时触发，index 为选项下标	index: number	-
close	点击取消按钮时触发	-	-

Slots

插槽名	说明	版本
default	list 为空时展示的自定义内容	-

注意事项

1. tips 常以部分字段传入（如只写 text）：fontSize 缺失时组件兜底 13px。若自行传 fontSize，App 端 font-size:auto 会解析异常使标题塌陷，请传带单位的值（如 13px）。
2. asyncClose 默认为 false：点击选项派发 click(index) 后会同时关闭弹窗；置为 true 时只派发 click，需自行回写 v-model 再关闭（例如等待二次确认）。
3. disabled: true 的选项点击被拦截，不派发 click，文字置灰（走 lightColor）。
4. list 非空时按 list 渲染，list 为空（length === 0）时才渲染默认插槽，两者不会同时出现。
5. 底部取消按钮文案取 cancel-text，未传时走组件内置文案；cancel-btn=false 时取消按钮与其上方 6px 分隔条一起隐藏。
6. 取消按钮点击只关闭弹窗并派发 close，不派发 click（不会带出下标）。
7. 组件基于 ux-popup（mode="bottom"、length="auto"），遮罩点击关闭由 maskCloseAble 控制，默认开启。