如何使用ActionSheet选项卡组件_移动开发平台 mPaaS-阿里云帮助中心

本文介绍了使用 ActionSheet 选项卡组件的不同方式以及相关 API。

在 Kylin 工程中使用该组件。
在其他工程中使用，通过 ESModule 的方式导入组件。
使用 Service 命令式调用。Service 说明提供了 static methods、show options 的说明。

API 说明提供了 props、slots、events 的接口信息。

此外，如需查看该组件的视觉效果及示例代码，参考本文的 Demo。

Kylin

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

ESModule

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

Service 命令式调用

可以直接使用 ActionSheet.show('显示内容'); 的方式调用命令，不需要写在模板中。会自动在 document.body 上插入对应 DOM。

ActionSheet.show({
  title: '标题',
  items: ['123','321'],
  cancelButtonText: '取消'
}, function (index) {

});

Service 说明

static methods

ActionSheet 提供以下静态方法：

属性	说明	函数
show	创建一个 `ActionSheet` 实例并显示，创建的参数如下表所示。	Function(option: Object\|string, callback: Function): vm

show options

创建实例时，支持的参数如下：

属性	说明	类型	默认值
title	面板上方显示的说明文字。	String	-
items	选项的文字数组。	Array	-
cancelButtonText	取消按钮的文字。	String	‘取消’
destructiveBtnIndex	特殊操作的索引值。	Number	-
transitionDuration	渐变持续时间。	String	‘0.3s’
zIndex	设置弹层的 `zIndex` 值。	Number	9999

API 说明

props

属性	说明	类型	默认值
show	是否显示面板。	Boolean	false
title	面板上方显示的说明文字。	String	-
items	选项的文字数组。	Array	-
cancelButtonText	取消按钮的文字。	String	‘取消’
destructiveBtnIndex	特殊操作的索引值。	Number	-
transitionDuration	渐变持续时间。	String	‘0.3s’

events

属性	说明	函数
click	点击选项时触发，点击 mask 或取消按钮时为 -1。	Function(index: number): void

slots

属性	说明	作用域
label	用于对 `props.items` 进行 `DOM` 扩展的方式。	`{item: String}`

Demo

截图

代码

<template>
  <div>
    <AButton @click="show = true">点击</AButton>
    <ActionSheet
      :show="show"
      title="这是提供一行或二行注释, 通过信息澄清的方式避免产生用户疑问。"
      :items="['选项1', '选项2', '选项3', '瞎搞']"
      cancelButtonText="取消2"
      :destructiveBtnIndex="3"
      transitionDuration="0.3s"
      @click="onClick"
    />
  </div>
</template>

<script>
  export default {
    data() {
      return {
        show: false,
      };
    },
    methods: {
      onClick(index) {
        if (index === -1) {
          this.show = false;
        }
      },
    },
  };
</script>