ActionSheet 选项卡_弹窗组件_基于 H5 框架 - UI 组件库_前端框架与 UI 组件

ActionSheet 选项卡文档介绍了使用该组件的不同方式以及 API 文档：

在 Kylin 工程中使用该组件。
在其他工程中使用，通过 ESModule 的方式导入组件。

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>