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
提供以下静态方法:
属性 | 说明 | 函数 |
---|---|---|
show | 创建一个 | Function(option: Object|string, callback: Function): vm |
show options
创建实例时,支持的参数如下:
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
title | 面板上方显示的说明文字。 | String | - |
items | 选项的文字数组。 | Array | - |
cancelButtonText | 取消按钮的文字。 | String | ‘取消’ |
destructiveBtnIndex | 特殊操作的索引值。 | Number | - |
transitionDuration | 渐变持续时间。 | String | ‘0.3s’ |
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 | 用于对 |
|
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>