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 提供以下静态方法：

name	说明	函数
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

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

slots

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

Demo

1.show

截图

代码

<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>