uv-ui

# ActionSheet 操作菜单

✈

组件名：uv-action-sheet

点击下载&安装 (opens new window)

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

# 平台兼容性

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

# 基本使用

  • 通过title(设置标题)，cancelText(取消按钮的文字，不为空时显示按钮)，description(选项上方的描述信息)。
  • 通过actions设置需要显示的菜单，该值为一个数组，元素为对象，对象至少要提供name属性，另外可选的有subname(描述)，disabled(是否禁用)，loading(加载动画)， color(字体颜色)，fontSize(字体大小)。
  • 通过ref调用open()控制组件的打开。
<template>
	<view>
		<uv-action-sheet 
		ref="actionSheet"
		:actions="list" 
		title="标题"
		@select="select"
		@close="close">
		</uv-action-sheet>
		<button @click="open">打开ActionSheet</button>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				list: [{
					name: '选项一',
					subname: "选项一描述",
					color: '#ffaa7f',
					fontSize: '20'
				}, {
					name: '选项二禁用',
					disabled: true
				}, {
					name: '开启load加载', //开启后文字不显示
					loading: true
				}]
			}
		},
		methods: {
			open() {
				this.$refs.actionSheet.open();
			},
			select(e){
				console.log('选中该项：',e);
			},
			close(){
				console.log('关闭');
			}
		}
	}
</script>

# 配置点击遮罩关闭和点击某个菜单项时关闭弹窗

  • 通过closeOnClickAction参数来配置点击某个菜单项时是否关闭弹窗，设置为false不影响select事件返回，默认true。
  • 通过closeOnClickOverlay参数配置点击遮罩是否允许关闭，默认true。
<template>
	<view>
		<uv-action-sheet 
		ref="actionSheet" 
		:actions="list" 
		title="标题" 
		:closeOnClickOverlay="false" 
		:closeOnClickAction="false" 
		@select="select" 
		@close="close">
		</uv-action-sheet>
		<button @click="open">打开ActionSheet</button>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				list: [{
					name: '选项一'
				}, {
					name: '选项二'
				}]
			}
		},
		methods: {
			open() {
				this.$refs.actionSheet.open();
			},
			select(e) {
				console.log('选中该项：', e);
			},
			close() {
				console.log('关闭');
			}
		}
	}
</script>

# 选项开放能力

所有开放能力请参考uni提供的button开放能力 (opens new window)。

<template>
	<view>
		<uv-action-sheet 
		ref="actionSheet" 
		:actions="list" 
		title="开放能力" 
		@select="select" 
		@close="close">
		</uv-action-sheet>
		<button @click="open">打开ActionSheet</button>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				list: [{
					name: '开放能力-分享',
					openType: 'share'
				},{
					name: '开放能力-获取用户信息',
					openType: 'getUserInfo'
				},{
					name: '开放能力-客服会话',
					openType: 'contact'
				},{
					name: '开放能力-其他'
				}]
			}
		},
		methods: {
			open() {
				this.$refs.actionSheet.open();
			},
			select(e) {
				console.log('选中该项：', e);
				if(e.name == '开放能力-其他') {
					uni.showModal({
						content: '参考uni提供的button开放能力',
						showCancel: false
					})
				}
			},
			close() {
				console.log('关闭');
			}
		}
	}
</script>

完整示例下载地址

https://ext.dcloud.net.cn/plugin?name=uv-ui (opens new window)

# API

# ActionSheet Props

参数 说明 类型 默认值 可选值
title 设置标题 String - -
description 选项上方的描述信息 String - -
actions 按钮的文字数组，见上方文档示例 Array<Object> [ ] -
cancelText 取消按钮的文字，不为空时显示按钮 String - -
safeAreaInsetBottom 是否开启底部安全区适配 Boolean false true | false
closeOnClickOverlay 点击遮罩是否允许关闭组件 Boolean - -
closeOnClickAction 点击某个菜单项时是否关闭组件 String true true | false
round 圆角值，默认无圆角 String | Number 0 -
lang 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文 String en en | zh_CN | zh_TW |
sessionFrom 会话来源，open-type="contact"时有效。只微信小程序有效 String - -
sendMessageTitle 会话内消息卡片标题，openType="contact"时有效 String - -
sendMessagePath 会话内消息卡片点击跳转小程序路径，openType="contact"时有效 String - -
sendMessageImg 会话内消息卡片图片，openType="contact"时有效 String - -
showMessageCard 是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，openType="contact"时有效 Boolean false true | false
appParameter 打开 APP 时，向 APP 传递的参数，openType=launchApp 时有效 String - -

# ActionSheet Actions Props

参数 说明 类型 默认值 可选值
openType 小程序的打开方式 String '' -
disabled 该菜单是否禁用 Boolean false true | false
loading 该菜单是否处于加载状态 Boolean false true | false
name 该菜单的标题 String '' -
subname 该菜单的描述 String '' -
fontSize 该菜单name文字的大小，单位px(rpx) String 16px -
color 该菜单name文字的颜色 String #303133 -

# ActionSheet Methods

方法名 说明
open 弹出操作菜单组件
close 关闭操作菜单组件

# ActionSheet Events

事件名 说明 回调参数
@select 点击ActionSheet列表项时触发 -
@close 点击取消按钮时触发。点击遮罩触发该事件需要设置:closeOnClickOverlay="true" -
@getuserinfo 用户点击该按钮时，会返回获取到的用户信息，回调的 detail 数据与 wx.getUserInfo 返回的一致，openType="getUserInfo"时有效 detail
@contact 客服消息回调，openType="contact"时有效 -
@getphonenumber 获取用户手机号回调，openType="getPhoneNumber"时有效 -
@error 当使用开放能力时，发生错误的回调，openType="error"时有效 -
@launchapp 打开 APP 成功的回调，openType="launchApp"时有效 -
@opensetting 在打开授权设置页后回调，openType="openSetting"时有效 -

← Tabs 标签选项卡 →