# ActionSheet 动作面板

# 平台差异说明

App	H5	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
√	√	√	√	√	√	√

# 示例

# 基础使用

通过 <pi-action-sheet> 标签引入，通过 value/v-model 属性设置动作面板的是否显示

<template>
  <pi-form show-right-icon>
    <pi-form-item label="基础使用" @click="baseUsed.show = true">
      <input
        :value="form.baseUsed"
        type="text"
        class="input"
        placeholder="请选择"
        disabled
      />
    </pi-form-item>
    <pi-form-item label="展示描述信息" @click="description.show = true">
      <input
        :value="form.description"
        type="text"
        class="input"
        placeholder="请选择"
        disabled
      />
    </pi-form-item>
    <pi-form-item label="展示取消按钮" @click="cancelText.show = true">
      <input
        :value="form.cancelText"
        type="text"
        class="input"
        placeholder="请选择"
        disabled
      />
    </pi-form-item>
  </pi-form>
  <pi-action-sheet
    v-model="baseUsed.show"
    :items="baseUsed.items"
    @select="form.baseUsed = $event.text"
  />
  <pi-action-sheet
    v-model="description.show"
    :items="description.items"
    description="这是一段描述文字"
    @select="form.description = $event.text"
  />
  <pi-action-sheet
    v-model="cancelText.show"
    :items="cancelText.items"
    cancel-text="取消"
    @select="form.cancelText = $event.text"
  />
</template>

<script>
export default {
  data() {
    return {
      form: {
        baseUsed: '选项一',
        description: '选项二',
        cancelText: '选项三',
        itemOption: '着色选项'
      },
      baseUsed: {
        show: false,
        items: [
          { id: 1, text: '选项一' },
          { id: 2, text: '选项二' },
          { id: 3, text: '选项三' }
        ],
        defaultValue: null
      },
      description: {
        show: false,
        items: [
          { id: 1, text: '选项一' },
          { id: 2, text: '选项二' },
          { id: 3, text: '选项三' }
        ],
        defaultValue: null
      },
      cancelText: {
        show: false,
        items: [
          { id: 1, text: '选项一' },
          { id: 2, text: '选项二' },
          { id: 3, text: '选项三' }
        ],
        defaultValue: null
      }
    }
  }
}
</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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90

# 选项状态

可通过 color 属性设置每项的文字颜色，可通过 disabled 属性设置每项是否可选，可通过 loading 属性设置每项是否加载中。

<template>
  <pi-form show-right-icon>
    <pi-form-item label="选项状态" @click="itemOption.show = true">
      <input
        :value="form.itemOption"
        type="text"
        class="input"
        placeholder="请选择"
        disabled
      />
    </pi-form-item>
  </pi-form>
   <pi-action-sheet
      v-model="baseUsed.show"
      :items="baseUsed.items"
      @select="form.baseUsed = $event.text"
    />
</template>

<script>
export default {
  data() {
    return {
      form: {
        itemOption: '着色选项'
      },
      itemOption: {
        show: false,
        items: [
          { id: 1, text: '着色选项', color: '#ee0a24' },
          { id: 2, text: '禁用选项', disabled: true },
          { id: 3, text: '加载选项', loading: true }
        ],
        defaultValue: null
      }
    }
  }
}
</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

# Props

Name	Description	Type	Required	Default
value/v-model	是否显示动作面板弹窗	—	`false`	-
customStyle	自定义样式	`Object`	`false`	{}
customClass	自定义样式类	`String`	`false`	''
items	选项列表	`Array`	`false`	[]
keyField	选项id字段	`String`	`false`	'id'
displayField	选项显示字段	`String`	`false`	'text'
itemHeight	行高单位默认rpx	`String` / `Number`	`false`	110
showItemBottomBorder	是否显示item下边框	`Boolean`	`false`	true
itemStyle	行样式	`Object`	`false`	{}
itemAlign	行对齐方式：`left` `center` `right`	`String`	`false`	'center'
popupSelect	选择弹窗的配置	`Object`	`false`	popupSelect配置项
popup	弹窗的配置	`Object`	`false`	popup配置项
description	选项上方的描述信息，不填则不显示	`String`	`false`	''
cancelText	取消按钮文字，不填则不显示	`String`	`false`	''

# PopupSelect Props

提示

以下属性覆盖pi-popup-select配置，其余属性参考popupSelect配置项

参数	说明	类型	必选	默认值
toolbarPosition	工具条位置	'bottom', 'top', 'none'	`false`	'none'
height	弹出选择层的高度	`String`	`false`	'auto'

提示

以下属性覆盖pi-popup配置，其余属性参考popup配置项

参数	说明	类型	必选	默认值
borderRadius	控制弹窗的四个角圆角效果	`String`/`Number`	`false`	'24rpx 24rpx 0 0'

# Events

Event Name	Description	Parameters

# Slots

Name	Description	Default Slot Content
header	-	-
item	自定义列表项	-
footer	-	-

# Methods

Method	Description	Parameters
handleSelectItem	确认选择	-

← Select 选择器 RegionsSelect 地区选择器 →