uView Next

# ActionSheet 操作菜单

本组件用于从底部弹出一个操作菜单，供用户选择并返回结果。
本组件功能类似于uni的uni.showActionSheetAPI，配置更加灵活，所有平台都表现一致。

# 平台差异说明

App（vue） App（nvue） H5 小程序
√ √ √ √

# 基本使用

通过以下属性配置组件：

  • title: 设置标题
  • cancelText: 取消按钮的文字（不为空时显示按钮）
  • description: 选项上方的描述信息
  • actions: 设置需要显示的菜单（数组格式）
    • 每个选项对象需提供 name 属性
    • 可选属性：
      • subname: 描述
      • disabled: 是否禁用
      • loading: 加载动画
      • color: 字体颜色
      • fontSize: 字体大小
  • show: 控制组件的弹出与收起（双向绑定）
<template>
	<view>
		<u-action-sheet :actions="list" :title="title" :show="show"></u-action-sheet>
		<u-button @click="show = true">打开ActionSheet</u-button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			title: '标题',
			list: [
				{
					name: '选项一',
					subname: "选项一描述",
					color: '#ffaa7f',
					fontSize: '20'
				},
				{
					name: '选项二禁用',
					disabled: true
				},
				{
					name: '开启load加载', //开启后文字不显示
					loading: true
				}
			],
			show: false
		};
	}
};
</script>

✅ Copy success!

# 配置点击遮罩关闭和点击菜单项关闭

  • closeOnClickAction: 点击菜单项时是否关闭弹窗
  • closeOnClickOverlay: 点击遮罩是否允许关闭（需自行处理关闭事件）
<template>
	<view>
		<u-action-sheet :closeOnClickOverlay="true" :closeOnClickAction="true" :title="title" :show="show"></u-action-sheet>
		<u-button @click="show = true">打开ActionSheet</u-button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			title: '标题',
			list: [
				{ name: '选项一' },
				{ name: '选项二' }
			],
			show: false
		};
	},
	onLoad() {},
	methods: {
	}
};
</script>

✅ Copy success!

# 获取点击选项

通过 select 回调事件获取所点击选项的 name 值：

<template>
	<view>
		<u-action-sheet :actions="list" @select="selectClick" :title="title" :show="show"></u-action-sheet>
		<u-button @click="show = true">打开ActionSheet</u-button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			title: '标题',
			list: [
				{ name: '选项一' },
				{ name: '选项二' }
			],
			show: false
		};
	},
	onLoad() {},
	methods: {
		selectClick(index) {
			console.log(index)
		}
	}
};
</script>

✅ Copy success!

# 页面源码地址

页面源码地址


 github  gitee

# API

# Props

参数 说明 类型 默认值 可选值
show 是否展示 Boolean false true
title 设置标题 String - -
description 选项上方的描述信息 String - -
actions 按钮的文字数组 Array<Object> [ ] -
cancelText 取消按钮的文字 String - -
closeOnClickAction 点击菜单项时是否关闭弹窗 Boolean - -
safeAreaInsetBottom 是否开启底部安全区适配 Boolean false true
openType 小程序的打开方式 String - -
closeOnClickOverlay 点击遮罩是否允许关闭 Boolean - -
round 圆角值 String | Number 0 -
lang 指定返回用户信息的语言 String en zh_CN | zh_TW | en
sessionFrom 会话来源（仅微信小程序有效） String - -
sendMessageTitle 会话内消息卡片标题 String - -
sendMessagePath 会话内消息卡片点击跳转小程序路径 String - -
sendMessageImg 会话内消息卡片图片 String - -
showMessageCard 是否显示会话内消息卡片 Boolean false true
appParameter 打开 APP 时传递的参数 String - -

# Events

事件名 说明 回调参数 版本
select 点击列表项时触发 - -
close 点击取消按钮时触发 - -
getuserinfo 获取用户信息回调 detail -
contact 客服消息回调 - -
getphonenumber 获取用户手机号回调 - -
error 使用开放能力时发生错误的回调 - -
launchapp 打开 APP 成功的回调 - -
opensetting 打开授权设置页后回调 - -

← Alert 警告提示 →