All Products
Search
Document Center

ActionSheet

Last Updated: May 27, 2021

This topic describes different methods of using the ActionSheet component and the API descriptions:

To view the visual effects and code sample of the component, see Demo.

Kylin

 
  1. <dependency component="{ ActionSheet }" src="@alipay/antui-vue" ></dependency>

ESModule

 
  1. import { ActionSheet } from '@alipay/antui-vue';

Service imperative call

You can directly use ActionSheet.show('Display content'); to call a command, instead of writing the command in a template. The DOM will be automatically inserted into document.body.

 
  1. ActionSheet.show({
  2. title: 'Title',
  3. items: ['123','321'],
  4. cancelButtonText: 'Cancel'
  5. }, function (index) {
  6. });

Service documentation

static methods

ActionSheet provides the following static method.

Name Description Function
show Creates and displays an ActionSheet instance with the parameters in the table below. Function(option: Object | string, callback: Function): vm

show options

The following parameters are accepted for creating an instance.

Property Description Type Default value
title Description text displayed above the panel. String -
items Text array of options. Array -
cancelButtonText Text of the Cancel button. String ‘Cancel’
destructiveBtnIndex Index value of a special operation. Number -
transitionDuration Gradient duration. String ‘0.3s’
zIndex Specifies the zIndex value of the elastic layer. Number 9999

API description

props

Property Description Type Default value
show Whether to display the panel. Boolean false
title Description text displayed above the panel. String -
items Text array of options. Array -
cancelButtonText Text of the Cancel button. String ‘Cancel’
destructiveBtnIndex Index value of a special operation. Number -
transitionDuration Gradient duration. String ‘0.3s’

events

Name Description Function
tap Triggered when an option is tapped. The value is -1 the mask or Cancel button is tapped. Function(index: number): void

slots

Name Description Scope
label Used for DOM extension of props.items {item: String}

Demo

Sample image

Sample code

 
  1. <template>
  2. <div>
  3. <AButton @click="show = true">点击</AButton>
  4. <ActionSheet
  5. :show="show"
  6. title="这是提供一行或二行注释, 通过信息澄清的方式避免产生用户疑问。"
  7. :items="['选项1', '选项2', '选项3', '瞎搞']"
  8. cancelButtonText="取消2"
  9. :destructiveBtnIndex="3"
  10. transitionDuration="0.3s"
  11. @click="onClick"
  12. />
  13. </div>
  14. </template>
  15. <script>
  16. export default {
  17. data() {
  18. return {
  19. show: false,
  20. };
  21. },
  22. methods: {
  23. onClick(index) {
  24. if (index === -1) {
  25. this.show = false;
  26. }
  27. },
  28. },
  29. };
  30. </script>