ActionSheet

Basic use

Pass title (set the title), cancelText (the text of the cancel button, display the button if it is not empty), description (description information above the option).
Set the menu to be displayed through actions. The value is an array, and the elements are objects. The object must provide at least the name attribute. In addition, the optional subname (description), disabled (whether it is disabled), loading (loading animation), color (font color), fontSize (font size).
Control the opening of the component by calling open() through ref.

vue

<template>
	<view>
		<wu-action-sheet 
		ref="actionSheet"
		:actions="list" 
		title="title"
		@select="select"
		@close="close">
		</wu-action-sheet>
		<button @click="open">Open ActionSheet</button>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				list: [{
					name: 'Option one',
					subname: "Option one description",
					color: '#ffaa7f',
					fontSize: '20'
				}, {
					name: 'Option 2 is disabled',
					disabled: true
				}, {
					name: 'Enable load loading', //Text is not displayed after turning it on
					loading: true
				}]
			}
		},
		methods: {
			open() {
				this.$refs.actionSheet.open();
			},
			select(e){
				console.log('Check this item:',e);
			},
			close(){
				console.log('close');
			}
		}
	}
</script>

<template>
	<view>
		<wu-action-sheet 
		ref="actionSheet"
		:actions="list" 
		title="title"
		@select="select"
		@close="close">
		</wu-action-sheet>
		<button @click="open">Open ActionSheet</button>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				list: [{
					name: 'Option one',
					subname: "Option one description",
					color: '#ffaa7f',
					fontSize: '20'
				}, {
					name: 'Option 2 is disabled',
					disabled: true
				}, {
					name: 'Enable load loading', //Text is not displayed after turning it on
					loading: true
				}]
			}
		},
		methods: {
			open() {
				this.$refs.actionSheet.open();
			},
			select(e){
				console.log('Check this item:',e);
			},
			close(){
				console.log('close');
			}
		}
	}
</script>

Use the closeOnClickAction parameter to configure whether to close the pop-up window when a menu item is clicked. Setting it to false does not affect the return of the select event. The default is true.
Use the closeOnClickOverlay parameter to configure whether the click mask is allowed to be closed. The default is true.

vue

<template>
	<view>
		<wu-action-sheet 
		ref="actionSheet" 
		:actions="list" 
		title="title" 
		:closeOnClickOverlay="false" 
		:closeOnClickAction="false" 
		@select="select" 
		@close="close">
		</wu-action-sheet>
		<button @click="open">Open ActionSheet</button>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				list: [{
					name: 'Option one'
				}, {
					name: 'Option two'
				}]
			}
		},
		methods: {
			open() {
				this.$refs.actionSheet.open();
			},
			select(e) {
				console.log('Check this item:', e);
			},
			close() {
				console.log('close');
			}
		}
	}
</script>

<template>
	<view>
		<wu-action-sheet 
		ref="actionSheet" 
		:actions="list" 
		title="title" 
		:closeOnClickOverlay="false" 
		:closeOnClickAction="false" 
		@select="select" 
		@close="close">
		</wu-action-sheet>
		<button @click="open">Open ActionSheet</button>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				list: [{
					name: 'Option one'
				}, {
					name: 'Option two'
				}]
			}
		},
		methods: {
			open() {
				this.$refs.actionSheet.open();
			},
			select(e) {
				console.log('Check this item:', e);
			},
			close() {
				console.log('close');
			}
		}
	}
</script>

Open capabilities

For all open capabilities, please refer to the button provided by uni Open capabilities。

vue

<template>
	<view>
		<wu-action-sheet 
		ref="actionSheet" 
		:actions="list" 
		title="Open capabilities" 
		@select="select" 
		@close="close">
		</wu-action-sheet>
		<button @click="open">Open ActionSheet</button>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				list: [{
					name: 'Open capabilities-Share',
					openType: 'share'
				},{
					name: 'Open ability-obtain user information',
					openType: 'getUserInfo'
				},{
					name: 'Open capabilities-Customer service session',
					openType: 'contact'
				},{
					name: 'Open capabilities-other'
				}]
			}
		},
		methods: {
			open() {
				this.$refs.actionSheet.open();
			},
			select(e) {
				console.log('Check this item:', e);
				if(e.name == 'Open capabilities-other') {
					uni.showModal({
						content: 'Refer to the button opening capabilities provided by uni',
						showCancel: false
					})
				}
			},
			close() {
				console.log('close');
			}
		}
	}
</script>

<template>
	<view>
		<wu-action-sheet 
		ref="actionSheet" 
		:actions="list" 
		title="Open capabilities" 
		@select="select" 
		@close="close">
		</wu-action-sheet>
		<button @click="open">Open ActionSheet</button>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				list: [{
					name: 'Open capabilities-Share',
					openType: 'share'
				},{
					name: 'Open ability-obtain user information',
					openType: 'getUserInfo'
				},{
					name: 'Open capabilities-Customer service session',
					openType: 'contact'
				},{
					name: 'Open capabilities-other'
				}]
			}
		},
		methods: {
			open() {
				this.$refs.actionSheet.open();
			},
			select(e) {
				console.log('Check this item:', e);
				if(e.name == 'Open capabilities-other') {
					uni.showModal({
						content: 'Refer to the button opening capabilities provided by uni',
						showCancel: false
					})
				}
			},
			close() {
				console.log('close');
			}
		}
	}
</script>

API

ActionSheet Props

Parameters	Description	Type	Default value	Optional value
title	Set title	String	-	-
description	Description information above the option	String	-	-
actions	The text array of the button, see the document example above	Array<Object>	[ ]	-
cancelText	The text of the cancel button, the button is displayed when it is not empty	String	-	-
safeAreaInsetBottom	Whether to enable bottom safe area adaptation	Boolean	false	true / false
closeOnClickOverlay	Whether the click mask allows closing the component	Boolean	-	-
closeOnClickAction	Whether to close the component when a menu item is clicked	Boolean	true	true / false
round	rounded corner value, no rounded corner by default	String / Number	0	-
lang	Specify the language for returning user information, `zh_CN` Simplified Chinese, `zh_TW` Traditional Chinese, `en` English	String	en	en / zh_CN / zh_TW
sessionFrom	Session source, valid when `open-type="contact"`. Only valid for WeChat applet	String	-	-
sendMessageTitle	The title of the message card in the session, valid when `openType="contact"`	String	-	-
sendMessagePath	Click to jump to the applet path of the message card in the session, valid when `openType="contact"`	String	-	-
sendMessageImg	In-session message card image, valid when `openType="contact"`	String	-	-
showMessageCard	Whether to display the in-session message card. Set this parameter to true. When the user enters the customer service session, the "Possible mini program to be sent" prompt will be displayed in the lower right corner. The user can quickly send the mini program message after clicking it, `openType="contact Valid when "`	Boolean	false	true / false
appParameter	The parameter passed to APP when opening APP, valid when `openType=launchApp`	String	-	-

ActionSheet Actions Props

Parameters	Description	Type	Default value	Optional value
openType	How to open the applet	String	''	-
disabled	Whether the menu is disabled	Boolean	false	true / false
loading	Whether the menu is loading	Boolean	false	true / false
name	The title of this menu	String	''	-
subname	Description of this menu	String	''	-
fontSize	The size of the menu `name` text, unit `px(rpx)`	String	16px	-
color	The color of the menu `name` text	String	#303133	-

ActionSheet Methods

Method name	Description
open	Pop-up operation menu component
close	Close the operation menu component

ActionSheet Events

Event name	Description	Callback parameters
select	Triggered when an `ActionSheet` list item is clicked	-
close	Fired when the cancel button is clicked. Clicking on the mask to trigger this event requires setting `:closeOnClickOverlay="true"`	-
getuserinfo	When the user clicks this button, the obtained user information will be returned. The `detail` data of the callback is consistent with that returned by `wx.getUserInfo`, which is valid when `openType="getUserInfo"`	detail
contact	Customer service message callback, valid when `openType="contact"`	-
getphonenumber	Callback to get the user's mobile phone number, valid when `openType="getPhoneNumber"`	-
error	When using open capabilities, the callback when an error occurs, valid when `openType="error"`	-
launchapp	Callback for successful opening of APP, valid when `openType="launchApp"`	-
opensetting	Called after opening the authorization setting page, valid when `openType="openSetting"`	-

ActionSheet ​

Basic use ​

Configure click mask to close and close the pop-up window when clicking a menu item ​

Open capabilities ​

API ​

ActionSheet Props ​

ActionSheet Actions Props ​

ActionSheet Methods ​

ActionSheet Events ​

ActionSheet

Basic use

Configure click mask to close and close the pop-up window when clicking a menu item

Open capabilities

API

ActionSheet Props

ActionSheet Actions Props

ActionSheet Methods

ActionSheet Events