ActionSheet

ActionSheet操作列表提供了两种常见的样式，灵活可控内容。

注： 由于此组件基于 create-api 实现，所以在使用之前，请确保自己了解过 create-api。

示例

  • 基本用法
    1. <cube-button @click="showActionSheet">操作列表</cube-button>
    1. export default {
    2. methods: {
    3.   showDefault() {
    4.     this.- createActionSheet({
    5.       title: '我是标题~~~',
    6.       data: [
    7.         {
    8.           content: 'align - center',
    9.           class: 'cube-foo'
    10.         },
    11.         {
    12.           content: 'align - left',
    13.           align: 'left'
    14.         },
    15.         {
    16.           content: 'align - right',
    17.           align: 'right'
    18.         }
    19.       ],
    20.       onSelect: (item, index) => {
    21.         this.- createToast({
    22.           txt: `Clicked - {item.content}`,
    23.           time: 1000
    24.         }).show()
    25.       }
    26.     }).show()
    27.   }
    28. }
    29. }

配置标题 title 和 data 数据项，注意 data 中内容是 content，一段 HTML 字符串，额外还可以配置自定义 class：class 和方向：align（值可以是 left、right）。

  • 高亮设置
    1. <cube-button @click="showActive">ActionSheet - active</cube-button>
    1. export default {
    2. methods: {
    3.   showActive() {
    4.     this.- createActionSheet({
    5.       title: '我是标题~~~',
    6.       active: 0,
    7.       data: [
    8.         {
    9.           content: '舒适型'
    10.         },
    11.         {
    12.           content: '七座商务'
    13.         },
    14.         {
    15.           content: '豪华型'
    16.         }
    17.       ],
    18.       onSelect: (item, index) => {
    19.         this.- createToast({
    20.           txt: `Clicked - {item.content}`,
    21.           type: 'correct',
    22.           time: 1000
    23.         }).show()
    24.       },
    25.       onCancel: () => {
    26.         this.- createToast({
    27.           txt: `Clicked canceled`,
    28.           type: 'warn',
    29.           time: 1000
    30.         }).show()
    31.       }
    32.     }).show()
    33.   }
    34. }
    35. }

通过设置 active 属性来控制高亮的是第几个。

  • Picker 样式设定
    1. <cube-button @click="showPickerStyle">ActionSheet - picker style</cube-button>
    1. export default {
    2. methods: {
    3.   showPickerStyle() {
    4.     this.- createActionSheet({
    5.       title: '我是标题~~~',
    6.       pickerStyle: true,
    7.       data: [
    8.         {
    9.           content: '舒适型'
    10.         },
    11.         {
    12.           content: '七座商务'
    13.         },
    14.         {
    15.           content: '豪华型'
    16.         }
    17.       ],
    18.       onSelect: (item, index) => {
    19.         this.- createToast({
    20.           txt: `Clicked - {item.content}`,
    21.           type: 'correct',
    22.           time: 1000
    23.         }).show()
    24.       },
    25.       onCancel: () => {
    26.         this.- createToast({
    27.           txt: `Clicked canceled`,
    28.           type: 'warn',
    29.           time: 1000
    30.         }).show()
    31.       }
    32.     }).show()
    33.   }
    34. }
    35. }

pickerStyle 属性决定是否使用 Picker 样式。

Props 配置

参数 说明 类型 可选值 默认值
title 组件的标题 String - ''
cancelTxt1.9.9 取消文案 String - '取消'
data 需要展示的数据列表 Array - []
active 高亮第几个选项 Number - -1
pickerStyle Picker 样式 Boolean true/false false
visible1.8.1 显示状态，是否可见。v-model绑定值 Boolean true/false false
maskClosable1.9.6 点击蒙层是否隐藏 Boolean true/false true
  • data 子配置项
参数 说明 类型 可选值 默认值
content 展示的内容 String 任意 HTML 字符串 ''
align 内容对齐方向 String left/right ''
class 自定义 class String - ''

事件

参数 说明 参数1 参数2
cancel 点击取消 - -
select 点击某项 点击项 item，即 data[index] 点击项的索引值 index

实例方法

方法名 说明
show 显示
hide 隐藏

原文:

https://didi.github.io/cube-ui/#/zh-CN/docs/action-sheet