# 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

|close|弹窗关闭|-| |cancel|弹窗取消关闭|-| |select|选中选项|item:选中条目|

# Slots

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

# Methods

Method Description Parameters
handleSelectItem 确认选择 -
Last updated: 2022/12/12 上午9:58:28
10:44