ActionSheet

The modal panel that pops up at the bottom contains multiple options related to the current situation.

Usage

Basic usage

An array of actions needs to be passed in. Each item in the array is an object, and the properties of the object are shown in the table below the document.

<press-action-sheet
   :show="show"
   :actions="actions"
   @close="onClose"
   @select="onSelect"
/>

export default {
   data() {
     return {
       show: false,
       actions: [
         {
           name: 'Options',
         },
         {
           name: 'Options',
         },
         {
           name: 'Options',
           subname: 'Description information',
           openType: 'share',
         },
       ],
     }
   },
   methods: {
     onClose() {
       this.setData({ show: false });
     },

     onSelect(event) {
       console.log(event.detail);
     },
   }
};

Show cancel button

After setting the cancel-text property, a cancel button will be displayed at the bottom, and the current menu will be closed after clicking.

<press-action-sheet
   :show="show"
   :actions="actions"
   cancel-text="cancel"
/>

Display description information

After setting the description attribute, a description will be displayed above the option.

<press-action-sheet
   :show="show"
   :actions="actions"
   description="This is a description"
/>

Option Status

Options can be set to a loaded state or a disabled state.

<press-action-sheet
   :show="show"
   :actions="actions"
   cancel-text="cancel"
/>

export default {
   data() {
     return {
       show: false,
       actions: [
         { name: 'coloring options', color: '#ee0a24' },
         { loading: true },
         { name: 'Disable option', disabled: true },
       ],
     }
   },
});

Custom panel

Display the title bar by setting the title property, and you can use the slot to customize the menu content.

<press-action-sheet :show="show" title="title">
   <div>content</div>
</press-action-sheet>

WeChat Open Capability

An array of actions needs to be passed in. Each item in the array is an object, and the properties of the object are shown in the table below the document.

<press-action-sheet
   :show="show"
   :actions="actions"
   @close="onClose"
   @getuserinfo="onGetUserInfo"
/>

export default {
   data() {
     return {
       show: false,
       actions: [
         { name: 'Get user information', color: '#07c160', openType: 'getUserInfo' },
       ],
     }
   },
   methods: {
     onClose() {
       this.setData({ show: false });
     },

     onGetUserInfo(e) {
       console.log(e.detail);
     },
   }
};

API

Props

Parameter	Description	Type	Default
show	Whether to show the action panel	boolean	-
actions	menu options	Array	[]
title	title	string	-
description v1.0.0	description above the option	string	-
z-index	z-index level	number	100
cancel-text	cancel button text	string	-
overlay	whether to show the overlay	boolean	-
round v1.0.0	Whether to show rounded corners	boolean	true
close-on-click-action	Whether to close the option after clicking	boolean	true
close-on-click-overlay	Whether to close the menu when clicking the overlay	boolean	-
safe-area-inset-bottom	Whether to set a bottom safety distance for iPhoneX	boolean	true

Events

Event Name	Description	Parameters
select	Triggered when the option is selected, not triggered when it is disabled or loaded	event.detail: the object corresponding to the option
close	fires when close	-
cancel	fires when the cancel button is clicked	-
click-overlay	Triggered when the overlay is clicked	-
getuserinfo	When the user clicks the button, the obtained user information will be returned, and the detail data of the callback is consistent with that returned by wx.getUserInfo, openType=" valid when getUserInfo"	-
contact	Customer service message callback, valid when openType="contact"	-
getphonenumber	Callback to get the user's phone number, valid when openType="getPhoneNumber"	-
error	When the open capability is used, an error callback occurs, valid when openType="launchApp"	-
launchapp	The callback for successfully opening the APP, valid when openType="launchApp"	-
opensetting	Callback after opening the authorization setting page, valid when openType="openSetting"	-

actions

actions in API is an array of objects, each object in the array configures each column, and each column has the following key:

key name	description	type	default value
name	title	string	-
subname	subtitle	string	-
color	option text color	string	-
loading	Whether it is loading state	boolean	-
disabled	Whether it is disabled or not	boolean	-
className	add extra class class name for the corresponding column	string	-
openType	WeChat open capability, for specific support, please refer to WeChat official document (opens new window)	string	-
lang	Specifies the language for returning user information, zh_CN for Simplified Chinese, zh_TW for Traditional Chinese, en for English	string	en
sessionFrom	session source, valid when openType="contact"	string	-
sendMessageTitle	In-conversation message card title, valid when openType="contact"	string	current title
sendMessagePath	Click on the message card in the session to jump to the applet path, valid when openType="contact"	string	Current sharing path
sendMessageImg	In-conversation message card image, valid when openType="contact"	string	Screenshot
showMessageCard	Whether to display the message card in the session, set this parameter to true, the user enters the customer service session and the "Mini Program to be sent" prompt will be displayed in the lower right corner, and the user can quickly send the Mini Program message after clicking, openType="contact" Valid when	string	false
appParameter	When opening the APP, the parameters passed to the APP, valid when openType=launchApp	string	-

Theme customization

--action-sheet-max-height：

--action-sheet-header-height：

--action-sheet-header-font-size：

--action-sheet-description-color：

--action-sheet-description-font-size：

--action-sheet-description-line-height：

--action-sheet-item-background：

--action-sheet-item-font-size：

--action-sheet-item-line-height：

--action-sheet-item-text-color：

--action-sheet-item-disabled-text-color：

--action-sheet-subname-color：

--action-sheet-subname-font-size：

--action-sheet-subname-line-height：

--action-sheet-close-icon-size：

--action-sheet-close-icon-color：

--action-sheet-close-icon-padding：

--action-sheet-cancel-text-color：

--action-sheet-cancel-padding-top：

--action-sheet-cancel-padding-color：