更新时间:2020-11-25 11:09
ActionSheet 选项卡文档介绍了使用该组件的不同方式以及 API 文档:
API 文档 提供了 props、slots、events 的接口信息。
此外,如需查看该组件的视觉效果及示例代码,参考本文的 Demo。
<dependency component="{ ActionSheet }" src="@alipay/antui-vue" ></dependency>
import { ActionSheet } from '@alipay/antui-vue';
可以直接使用 ActionSheet.show('显示内容');
的方式调用命令,不需要写在模板中。会自动在 document.body
上插入对应 DOM
。
ActionSheet.show({
title: '标题',
items: ['123','321'],
cancelButtonText: '取消'
}, function (index) {
});
ActionSheet
提供以下静态方法:
name | 说明 | 函数 |
---|---|---|
show | 创建一个 ActionSheet 实例并显示,创建的参数如下 |
Function(option: Object|string, callback: Function): vm |
创建实例时,接受参数如下:
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
title | 面板上方显示的说明文字 | string | - |
items | 选项的文字数组 | array | - |
cancelButtonText | 取消按钮的文字 | string | '取消' |
destructiveBtnIndex | 特殊操作的索引值 | number | - |
transitionDuration | 渐变持续时间 | string | ‘0.3s’ |
zIndex | 设置弹层的 zIndex 值 |
number | 9999 |
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
show | 是否显示面板 | boolean | false |
title | 面板上方显示的说明文字 | string | - |
items | 选项的文字数组 | array | - |
cancelButtonText | 取消按钮的文字 | string | '取消' |
destructiveBtnIndex | 特殊操作的索引值 | number | - |
transitionDuration | 渐变持续时间 | string | ‘0.3s’ |
name | 说明 | 函数 |
---|---|---|
click | 点击选项时触发,点击 mask 或取消按钮时为 -1 | Function(index: number): void |
name | 说明 | 作用域 |
---|---|---|
label | 用于对 props.items 进行 DOM 扩展的方式 |
{item: String} |
<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>
在文档使用中是否遇到以下问题
更多建议
匿名提交