mpx-cube-ui

# Cube-AcitionSheet

# 介绍

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

# 示例

# 基本用法

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

收起 
<template>
  <view>
    <cube-button bindtap="showActionSheet">action-sheet</cube-button>
    <cube-action-sheet
      wx:ref="actionSheet"
      title="{{title}}"
      inputData="{{inputData}}"
      bindselect="onSelect"
    />
    <cube-toast
      txt="{{ selectContent }}"
      wx:ref="selectToast">
    </cube-toast>
  </view>
</template>

<script>
  import { createComponent } from '@mpxjs/core'
  createComponent({
    data() {
      return {
        inputData: [
          {
            content: 'align-center',
            class: 'cube-foo'
          },
          {
            content: 'align-left',
            align: 'left'
          },
          {
            content: 'align-right',
            align: 'right'
          }
        ],
        selectContent: '',
        title: '我是标题'
      }
    },
    methods: {
      onSelect(selectData) {
        const { item } = selectData.detail
        this.selectContent = `Clicked: ${item.content}`
        this.$refs.selectToast.show()
      },
      showActionSheet() {
        this.$refs.actionSheet.show()
      }
    }
  })
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

# 高亮设置

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

收起 
<template>
  <view>
    <cube-button bindtap="showActionSheet">action-sheet-active</cube-button>
    <cube-action-sheet
      wx:ref="actionSheet"
      title="{{title}}"
      inputData="{{inputData}}"
      active="{{active}}"
      bind:select="onSelect"
      bind:cancel="onCancel"
      bind:maskClose="onMaskClose"
    />
    <cube-toast
      txt="{{ selectContent }}"
      wx:ref="selectToast">
    </cube-toast>
  </view>
</template>

<script>
  import { createComponent } from '@mpxjs/core'
  createComponent({
    data: {
    inputData: [
      {
        content: '舒适型'
      },
      {
        content: '七座商务'
      },
      {
        content: '豪华型'
      }
    ],
    active: 0,
    selectContent: '',
    title: '我是标题'
  },
  methods: {
    onSelect(selectData) {
      const { item, index } = selectData.detail
      this.selectContent = `Clicked ${item.content}`
      this.active = index
      this.$refs.selectToast.show()
    },
    onCancel() {
      this.selectContent = 'Clicked canceled '
      this.$refs.selectToast.show()
    },
    onMaskClose() {
      this.selectContent = 'Clicked maskClose '
      this.$refs.selectToast.show()
    },
    showActionSheet() {
      this.$refs.actionSheet.show()
    },
  }
  })
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

# Picker 样式设定

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

收起 
<template>
  <view>
    <cube-button bindtap="showActionSheet">action-sheet-picker</cube-button>
    <cube-action-sheet
      wx:ref="actionSheet"
      title="{{ title }}"
      inputData="{{inputData}}"
      pickerStyle="{{true}}"
      bind:select="onSelect"
      bind:cancel="onCancel"
      bind:maskClose="onMaskClose"
    />
    <cube-toast
      txt="{{ selectContent }}"
      wx:ref="selectToast">
    </cube-toast>
  </view>
</template>

<script>
  import { createComponent } from '@mpxjs/core'
  createComponent({
    data: {
    inputData: [
      {
        content: '舒适型'
      },
      {
        content: '七座商务'
      },
      {
        content: '豪华型'
      }
    ],
    selectContent: '',
    title: '我是标题'
  },
  methods: {
    onSelect(selectData) {
      const { item } = selectData.detail
      this.selectContent = `Clicked ${item.content}`
      this.$refs.selectToast.show()
    },
    onCancel() {
      this.selectContent = 'Clicked canceled '
      this.$refs.selectToast.show()
    },
    onMaskClose() {
      this.selectContent = 'Clicked maskClose '
      this.$refs.selectToast.show()
    },
    showActionSheet() {
      this.$refs.actionSheet.show()
    }
  }
  })
</script>

<style lang="stylus">
.rate-item-demo
  width: 100%
  height: 100%
  background-size: 100%
  background-color: grey
.cube-rate-item_active
  .cube-rate-item-demo
    background-color: orange
.cube-rate-item_half_active
  .cube-rate-item-demo
    background-color: blue
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72

# Props

参数 说明 类型 可选值 默认值
themeType 用于生成最外层类名 如原类名为 cube-component，添加 themeType = demo 后，类名变为 cube-component cube-component-demo String - -
visible 遮盖层初始状态是否可见 Boolean - false
inputData 需要展示的数据列表 Array - []
active 高亮第几个选项 Number - -1
title 组件的标题 String - -
pickerStyle Picker 样式 Boolean true/false false
maskClosable 点击蒙层是否隐藏 Boolean true/false true
cancelTxt 取消文案 String - 取消

# Events

事件名 说明 参数
toggle 显示/隐藏时触发 event.detail = { value }， 表当前状态是显示还是隐藏
maskClose 点击遮盖层时触发 -
cancel 点击取消时触发 -
select 点击某项时触发 -

# Methods

组件实例方法 说明 参数 返回值
show 显示 - -
hide 隐藏 - -

# CSS Variable

变量名 默认值 含义
$action-sheet-color
#666
 字体颜色
$action-sheet-active-color
#fc9153
 选中时字体高亮颜色
$action-sheet-bgc
#fff
 背景颜色
$action-sheet-active-bgc
rgba(0, 0, 0, .04)
 选中时背景颜色
$action-sheet-title-color
#333
 标题字体颜色
$action-sheet-space-bgc
rgba(37, 38, 45, .4)
 横条背景颜色
$fontsize-content-items
16px
 内容元素的字体大小
$fontsize-picker-cancel
14px
 picker样式下的取消字体大小
$fontsize-title
18px
 标题的字体大小
$action-sheet-items-padding
17px 16px
 内容元素的内边距
$action-sheet-title-padding
16px
 标题的内边距
$action-sheet-title-height
1em
 标题高度
$action-sheet-title-picker-padding
21px
 picker样式下标题高度
$action-sheet-space-height
6px
 横条的高度
$cube-action-sheet-cancel-top
5px
 picker样式下取消按钮距上的高度

← RadioModal →