ActionSheet 选项卡

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>