ActionSheet 动作面板

介绍

底部弹起的模态面板,包含与当前情境相关的多个选项。

引入

app.jsonindex.json中引入组件,详细介绍见快速上手

  1. "usingComponents": {
  2. "van-action-sheet": "@vant/weapp/action-sheet/index"
  3. }

代码演示

基础用法

需要传入一个actions的数组,数组的每一项是一个对象,对象属性见文档下方表格。

  1. <van-action-sheet
  2. show="{{ show }}"
  3. actions="{{ actions }}"
  4. bind:close="onClose"
  5. bind:select="onSelect"
  6. />
  1. Page({
  2. data: {
  3. show: false,
  4. actions: [
  5. {
  6. name: '选项',
  7. },
  8. {
  9. name: '选项',
  10. },
  11. {
  12. name: '选项',
  13. subname: '描述信息',
  14. openType: 'share',
  15. },
  16. ],
  17. },
  18. onClose() {
  19. this.setData({ show: false });
  20. },
  21. onSelect(event) {
  22. console.log(event.detail);
  23. },
  24. });

展示取消按钮

设置cancel-text属性后,会在底部展示取消按钮,点击后关闭当前菜单。

  1. <van-action-sheet
  2. show="{{ show }}"
  3. actions="{{ actions }}"
  4. cancel-text="取消"
  5. />

展示描述信息

设置description属性后,会在选项上方显示描述信息。

  1. <van-action-sheet
  2. show="{{ show }}"
  3. actions="{{ actions }}"
  4. description="这是一段描述信息"
  5. />

选项状态

选项可以设置为加载状态或禁用状态。

  1. <van-action-sheet
  2. show="{{ show }}"
  3. actions="{{ actions }}"
  4. cancel-text="取消"
  5. />
  1. Page({
  2. data: {
  3. show: false,
  4. actions: [
  5. { name: '着色选项', color: '#ee0a24' },
  6. { loading: true },
  7. { name: '禁用选项', disabled: true },
  8. ],
  9. },
  10. });

自定义面板

通过设置title属性展示标题栏,同时可以使用插槽自定义菜单内容。

  1. <van-action-sheet show="{{ show }}" title="标题">
  2. <view>内容</view>
  3. </van-action-sheet>

微信开放能力

需要传入一个actions的数组,数组的每一项是一个对象,对象属性见文档下方表格。

  1. <van-action-sheet
  2. show="{{ show }}"
  3. actions="{{ actions }}"
  4. bind:close="onClose"
  5. bind:getuserinfo="onGetUserInfo"
  6. />
  1. Page({
  2. data: {
  3. show: false,
  4. actions: [
  5. { name: '获取用户信息', color: '#07c160', openType: 'getUserInfo' },
  6. ],
  7. },
  8. onClose() {
  9. this.setData({ show: false });
  10. },
  11. onGetUserInfo(e) {
  12. console.log(e.detail);
  13. },
  14. });

API

Props

参数说明类型默认值
show是否显示动作面板boolean-
actions菜单选项Array[]
title标题string-
description v1.0.0选项上方的描述信息string-
z-indexz-index 层级number100
cancel-text取消按钮文字string-
overlay是否显示遮罩层boolean-
round v1.0.0是否显示圆角booleantrue
close-on-click-action是否在点击选项后关闭booleantrue
close-on-click-overlay点击遮罩是否关闭菜单boolean-
safe-area-inset-bottom是否为 iPhoneX 留出底部安全距离booleantrue

Events

事件名说明参数
bind:select选中选项时触发,禁用或加载状态下不会触发event.detail: 选项对应的对象
bind:close关闭时触发-
bind:cancel取消按钮点击时触发-
bind:click-overlay点击遮罩层时触发-
bind:getuserinfo用户点击该按钮时,会返回获取到的用户信息,回调的 detail 数据与 wx.getUserInfo 返回的一致,openType=”getUserInfo”时有效-
bind:contact客服消息回调,openType=”contact”时有效-
bind:getphonenumber获取用户手机号回调,openType=”getPhoneNumber”时有效-
bind:error当使用开放能力时,发生错误的回调,openType=”launchApp”时有效-
bind:launchapp打开 APP 成功的回调,openType=”launchApp”时有效-
bind:opensetting在打开授权设置页后回调,openType=”openSetting”时有效-

actions

API中的actions为一个对象数组,数组中的每一个对象配置每一列,每一列有以下key

键名说明类型默认值
name标题string-
subname二级标题string-
color选项文字颜色string-
loading是否为加载状态boolean-
disabled是否为禁用状态boolean-
className为对应列添加额外的 class 类名string-
openType微信开放能力,具体支持可参考 微信官方文档string-
lang指定返回用户信息的语言,zh_CN 简体中文,zh_TW 繁体中文,en 英文stringen
sessionFrom会话来源,openType=”contact”时有效string-
sendMessageTitle会话内消息卡片标题,openType=”contact”时有效string当前标题
sendMessagePath会话内消息卡片点击跳转小程序路径,openType=”contact”时有效string当前分享路径
sendMessageImg会话内消息卡片图片,openType=”contact”时有效string截图
showMessageCard是否显示会话内消息卡片,设置此参数为 true,用户进入客服会话会在右下角显示”可能要发送的小程序”提示,用户点击后可以快速发送小程序消息,openType=”contact”时有效stringfalse
appParameter打开 APP 时,向 APP 传递的参数,openType=launchApp 时有效string-

ActionSheet 动作面板 - 图1