WU-UI

中文

English

中文

English

Appearance

ActionSheet 操作菜单 ​

基本使用 ​

  • 通过 title (设置标题)，cancelText (取消按钮的文字，不为空时显示按钮)，description (选项上方的描述信息)。
  • 通过actions设置需要显示的菜单，该值为一个数组，元素为对象，对象至少要提供 name 属性，另外可选的有 subname (描述)，disabled (是否禁用)，loading (加载动画)， color (字体颜色)，fontSize (字体大小)。
  • 通过 ref 调用 open() 控制组件的打开。
vue
<template>
	<view>
		<wu-action-sheet 
		ref="actionSheet"
		:actions="list" 
		title="标题"
		@select="select"
		@close="close">
		</wu-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>
<template>
	<view>
		<wu-action-sheet 
		ref="actionSheet"
		:actions="list" 
		title="标题"
		@select="select"
		@close="close">
		</wu-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。
vue
<template>
	<view>
		<wu-action-sheet 
		ref="actionSheet" 
		:actions="list" 
		title="标题" 
		:closeOnClickOverlay="false" 
		:closeOnClickAction="false" 
		@select="select" 
		@close="close">
		</wu-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>
<template>
	<view>
		<wu-action-sheet 
		ref="actionSheet" 
		:actions="list" 
		title="标题" 
		:closeOnClickOverlay="false" 
		:closeOnClickAction="false" 
		@select="select" 
		@close="close">
		</wu-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 开放能力。

vue
<template>
	<view>
		<wu-action-sheet 
		ref="actionSheet" 
		:actions="list" 
		title="开放能力" 
		@select="select" 
		@close="close">
		</wu-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>
<template>
	<view>
		<wu-action-sheet 
		ref="actionSheet" 
		:actions="list" 
		title="开放能力" 
		@select="select" 
		@close="close">
		</wu-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>

API ​

ActionSheet Props ​

参数说明类型默认值可选值
title设置标题String--
description选项上方的描述信息String--
actions按钮的文字数组，见上方文档示例Array<Object>[ ]-
cancelText取消按钮的文字，不为空时显示按钮String--
safeAreaInsetBottom是否开启底部安全区适配Booleanfalsetrue / false
closeOnClickOverlay点击遮罩是否允许关闭组件Boolean--
closeOnClickAction点击某个菜单项时是否关闭组件Booleantruetrue / false
round圆角值，默认无圆角String / Number0-
lang指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文Stringenen / 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" 时有效Booleanfalsetrue / false
appParameter打开 APP 时，向 APP 传递的参数，openType=launchApp 时有效String--

ActionSheet Actions Props ​

参数说明类型默认值可选值
openType小程序的打开方式String''-
disabled该菜单是否禁用Booleanfalsetrue / false
loading该菜单是否处于加载状态Booleanfalsetrue / false
name该菜单的标题String''-
subname该菜单的描述String''-
fontSize该菜单 name 文字的大小，单位 px(rpx)String16px-
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" 时有效-