文档

ActionSheet 选项卡

更新时间:

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

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>
  • 本页导读 (0)