ActionSheet

优质

小牛编辑

133浏览

2023-12-01

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

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

示例

基本用法

<cube-button @click="showDefault">操作列表</cube-button>

export default {
  methods: {
    showDefault() {
      this.$createActionSheet({
        title: '我是标题~~~',
        data: [
          {
            content: '<em>align - center</em>',
            class: 'cube-foo'
          },
          {
            content: 'align - left',
            align: 'left'
          },
          {
            content: 'align - right',
            align: 'right'
          }
        ],
        onSelect: (item, index) => {
          this.$createToast({
            txt: `Clicked ${item.content}`,
            time: 1000
          }).show()
        }
      }).show()
    }
  }
}

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

高亮设置

<cube-button @click="showActive">ActionSheet - active</cube-button>

export default {
  methods: {
    showActive() {
      this.$createActionSheet({
        title: '我是标题~~~',
        active: 0,
        data: [
          {
            content: '舒适型'
          },
          {
            content: '七座商务'
          },
          {
            content: '豪华型'
          }
        ],
        onSelect: (item, index) => {
          this.$createToast({
            txt: `Clicked ${item.content}`,
            type: 'correct',
            time: 1000
          }).show()
        },
        onCancel: () => {
          this.$createToast({
            txt: `Clicked canceled`,
            type: 'warn',
            time: 1000
          }).show()
        }
      }).show()
    }
  }
}

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

Picker 样式设定

<cube-button @click="showPickerStyle">ActionSheet - picker style</cube-button>

export default {
  methods: {
    showPickerStyle() {
      this.$createActionSheet({
        title: '我是标题~~~',
        pickerStyle: true,
        data: [
          {
            content: '舒适型'
          },
          {
            content: '七座商务'
          },
          {
            content: '豪华型'
          }
        ],
        onSelect: (item, index) => {
          this.$createToast({
            txt: `Clicked ${item.content}`,
            type: 'correct',
            time: 1000
          }).show()
        },
        onCancel: () => {
          this.$createToast({
            txt: `Clicked canceled`,
            type: 'warn',
            time: 1000
          }).show()
        }
      }).show()
    }
  }
}

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

Props 配置

参数	说明	类型	可选值	默认值
title	组件的标题	String	-	''
cancelTxt^1.9.9	取消文案	String	-	'取消'
data	需要展示的数据列表	Array	-	[]
active	高亮第几个选项	Number	-	-1
pickerStyle	Picker 样式	Boolean	true/false	false
visible^1.8.1	显示状态，是否可见。`v-model`绑定值	Boolean	true/false	false
maskClosable^1.9.6	点击蒙层是否隐藏	Boolean	true/false	true
zIndex^1.9.6	样式 z-index 的值	Number	-	100

data 子配置项

参数	说明	类型	可选值	默认值
content	展示的内容	String	任意 HTML 字符串	''
align	内容对齐方向	String	left/right	''
class	自定义 class	String	-	''

事件

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

实例方法

方法名	说明
show	显示
hide	隐藏