全部产品

ActionSheet 选项卡

更新时间:2020-11-25 11:09:48

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

API 文档 提供了 props、slots、events 的接口信息。

此外,如需查看该组件的视觉效果及示例代码,参考本文的 Demo

Kylin

  1. <dependency component="{ ActionSheet }" src="@alipay/antui-vue" ></dependency>

ESModule

  1. import { ActionSheet } from '@alipay/antui-vue';

Service 命令式调用

可以直接使用 ActionSheet.show('显示内容'); 的方式调用命令,不需要写在模板中。会自动在 document.body 上插入对应 DOM

  1. ActionSheet.show({
  2. title: '标题',
  3. items: ['123','321'],
  4. cancelButtonText: '取消'
  5. }, function (index) {
  6. });

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

截图

代码

  1. <template>
  2. <div>
  3. <AButton @click="show = true">点击</AButton>
  4. <ActionSheet
  5. :show="show"
  6. title="这是提供一行或二行注释, 通过信息澄清的方式避免产生用户疑问。"
  7. :items="['选项1', '选项2', '选项3', '瞎搞']"
  8. cancelButtonText="取消2"
  9. :destructiveBtnIndex="3"
  10. transitionDuration="0.3s"
  11. @click="onClick"
  12. />
  13. </div>
  14. </template>
  15. <script>
  16. export default {
  17. data() {
  18. return {
  19. show: false,
  20. };
  21. },
  22. methods: {
  23. onClick(index) {
  24. if (index === -1) {
  25. this.show = false;
  26. }
  27. },
  28. },
  29. };
  30. </script>