ActionSheet 操作菜单

用于从底部弹出的操作菜单，为用户提供多个操作选项的选择界面。

基础参数

参数	说明	类型	可选值	默认值
pt	样式穿透配置，用于自定义组件内部元素样式	PassThrough	-	-

PassThrough

样式穿透配置，允许您自定义组件内部元素的样式类名。

参数	说明	类型
className	组件根元素样式	string
item	菜单项配置	PassThroughProps

插槽

插槽名	说明	参数
prepend	内容之前插入的内容
item	菜单项	item: ClActionSheetItem
append	内容之后插入的内容

类型定义

type ClActionSheetItem = {
	label: string; // 标签内容
	icon?: string; // 图标
	disabled?: boolean; // 是否禁用
	color?: string; // 字体、图标颜色
	callback?: () => void; // 点击回掉
};

type ClActionSheetOptions = {
	list: ClActionSheetItem[]; // 菜单列表
	title?: string; // 标题
	description?: string; // 描述
	cancelText?: string; // 取消文案，默认取消
	showCancel?: boolean; // 是否显示取消按钮，默认true
	maskClosable?: boolean; // 点击遮罩是否关闭，默认true
};

示例

基础用法

最简单的操作菜单使用方式。

注意事项

• ref 类型必须定义为 ClActionSheetComponentPublicInstance | null，默认值为 null
• open 方法的参数类型必须是 ClActionSheetOptions

<template>
	<cl-button @tap="open">打开操作菜单</cl-button>
	<cl-action-sheet ref="actionSheetRef" />
</template>

<script lang="ts" setup>
import { ref } from "vue";
import type { ClActionSheetOptions } from "@/uni_modules/cool-ui";

const actionSheetRef = ref<ClActionSheetComponentPublicInstance | null>(null);

function open() {
	actionSheetRef.value!.open({
		list: [
			{
				label: "反馈"
			}
		]
	} as ClActionSheetOptions);
}
</script>

带图标的操作菜单

为操作项添加图标，提升用户体验。

<template>
	<cl-button @tap="open">打开带图标的菜单</cl-button>
	<cl-action-sheet ref="actionSheetRef" />
</template>

<script lang="ts" setup>
import { ref } from "vue";
import type { ClActionSheetOptions } from "@/uni_modules/cool-ui";

const actionSheetRef = ref<ClActionSheetComponentPublicInstance | null>(null);

function open() {
	actionSheetRef.value!.open({
		list: [
			{
				label: "反馈",
				icon: "feedback-line"
			},
			{
				label: "设置",
				icon: "settings-line"
			}
		]
	} as ClActionSheetOptions);
}
</script>

带标题和描述

添加标题和描述信息，为用户提供更多上下文。

<template>
	<cl-button @tap="open">打开带标题的菜单</cl-button>
	<cl-action-sheet ref="actionSheetRef" />
</template>

<script lang="ts" setup>
import { ref } from "vue";
import type { ClActionSheetOptions } from "@/uni_modules/cool-ui";

const actionSheetRef = ref<ClActionSheetComponentPublicInstance | null>(null);

function open() {
	actionSheetRef.value!.open({
		title: "操作提示",
		description: "删除好友会同时删除所有聊天记录，此操作不可恢复",
		list: [
			{
				label: "删除好友",
				icon: "user-unfollow-line"
			},
			{
				label: "举报用户",
				icon: "flag-line"
			}
		]
	} as ClActionSheetOptions);
}
</script>

回调函数处理

为每个操作项设置回调函数，处理用户选择。

<template>
	<cl-button @tap="open">打开带回调的菜单</cl-button>
	<cl-action-sheet ref="actionSheetRef" />
</template>

<script lang="ts" setup>
import { ref } from "vue";
import type { ClActionSheetOptions } from "@/uni_modules/cool-ui";

const actionSheetRef = ref<ClActionSheetComponentPublicInstance | null>(null);

function open() {
	actionSheetRef.value!.open({
		title: "选择操作",
		description: "请选择要执行的操作",
		list: [
			{
				label: "编辑",
				icon: "edit-line",
				callback() {
					console.log("执行编辑操作");
					// 这里添加编辑逻辑
				}
			},
			{
				label: "分享",
				icon: "share-line",
				callback() {
					console.log("执行分享操作");
					// 这里添加分享逻辑
				}
			},
			{
				label: "删除",
				icon: "delete-bin-line",
				callback() {
					console.log("执行删除操作");
					// 这里添加删除逻辑
				}
			}
		]
	} as ClActionSheetOptions);
}
</script>

插槽自定义内容

使用插槽添加自定义内容，实现更复杂的布局需求。

<template>
	<cl-button @tap="open">打开自定义内容菜单</cl-button>

	<cl-action-sheet ref="actionSheetRef">
		<!-- 前置内容插槽 -->
		<template #prepend>
			<view class="px-3 mb-3">
				<cl-text size="14" color="#666">
					开通会员享受更多特权和服务，包括无广告体验、专属客服等
				</cl-text>
			</view>
		</template>

		<!-- 后置内容插槽 -->
		<template #append>
			<view class="pb-5 pt-2 px-3">
				<cl-checkbox v-model="agree">
					请阅读并同意《会员服务协议》和《隐私政策》
				</cl-checkbox>
			</view>
		</template>
	</cl-action-sheet>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import type { ClActionSheetOptions } from "@/uni_modules/cool-ui";

const actionSheetRef = ref<ClActionSheetComponentPublicInstance | null>(null);
const agree = ref(false);

function open() {
	actionSheetRef.value!.open({
		title: "选择支付方式",
		description: "请选择您偏好的支付方式完成订单",
		list: [
			{
				label: "支付宝",
				icon: "alipay-line",
				callback() {
					if (agree.value) {
						console.log("使用支付宝支付");
						// 支付宝支付逻辑
					} else {
						console.log("请先同意服务协议");
					}
				}
			},
			{
				label: "微信支付",
				icon: "wechat-line",
				callback() {
					if (agree.value) {
						console.log("使用微信支付");
						// 微信支付逻辑
					} else {
						console.log("请先同意服务协议");
					}
				}
			}
		]
	} as ClActionSheetOptions);
}
</script>