ActionSheet 动作面板 APP
该方法或组件支持移动端小程序调用

PC
该方法或组件支持桌面端小程序调用

从底部弹出的模态框，提供和当前场景相关的 2 个以上的操作动作，也支持提供标题和描述。内置固定的展示样式、不支持特别灵活的修改。

规则

提供清晰的退出按钮。
不要放置过多内容，避免面板纵向滚动。

引入方式

数字生活小程序工程中，不需要 import，直接使用组件标签即可。

import {ActionSheet} from '@21cnfe/vui'  
Vue.component('ActionSheet', ActionSheet)

代码演示

ActionSheet 动作面板 actionSheets

基本用法该组件提供三种模式选择，button，icon，share，共同属性有visible，type， mask，maskClosable，header，options；onClickMenu 回调函数为当前按钮点击回调，参数为当前按钮数据

<ActionSheet
  type="button"
  mask
  maskClosable
  :visible.sync="visible"
  :header="header"
  :options="options"
  @onClickMenu="menuClick"
/>

数据介绍主要介绍因模式不同，传入的 header 表现样式不同，传入的 options 的数据格式不同

button 模式

header 数据中的图片数据不会渲染，可以不传图片值
header 数据渲染样式为居中展示
options 数据必有属性格式为 [{name: ''}]，可在对象中加入自定义属性
options 数据将全部渲染成按钮，通过cancelButtonIndex，destructiveButtonIndex 属性设置取消按钮和破坏型按钮

icon 模式

header 数据渲染样式为从左至右展示
options 数据渲染样式为从左至右展示
options 数据必有属性格式为 [{name: '', iconType: '', url: ''}]，可在对象中加入自定义属性，当 iconType 为 icon，url 可使用 UI 组件库图标类型
options 数据将全部渲染成按钮，通过cancelButtonIndex，destructiveButtonIndex 属性设置取消按钮和破坏型按钮

share 模式

header 数据中无图片数据则居中展示
header 数据中有图片数据则从左至右展示
options 数据必有属性格式为 [{name: '', url: ''}]，可在对象中加入自定义属性
options 数据为二维数组时，将渲染多行分享列表

button 模式该模式带有 cancelButtonIndex 和 destructiveButtonIndex 两个属性，将 options 渲染的按钮组选出索引对应按钮作为取消按钮和破坏型按钮

<ActionSheet
  type="button"
  :visible.sync="buttonShow"
  :header="buttonHeader"
  :options="buttonOptions"
  :destructiveButtonIndex="1"
  :cancelButtonIndex="2"
  @onClickMenu="buttonClick"
  @onDelete="handleDelete"
/>

icon 模式该模式与 button 模式区别不大，主要体现在能够渲染 header 和 options 中的图片信息

<ActionSheet
  type="icon"
  :visible.sync="iconShow"
  :header="iconHeader"
  :options="iconOptions"
  :destructiveButtonIndex="1"
  :cancelButtonIndex="2"
  @onClickMenu="buttonClick"
  @onDelete="handleDelete"
/>

share 模式该模式主要用于分享面板，样式比较丰富，通过 options 数据控制单行与多行，独有 cancelButtonText 设置取消按钮文本

<ActionSheet
  type="share"
  :visible.sync="shareShow"
  :header="shareHeader"
  :options="shareOptions"
  @onClickMenu="buttonClick"
/>

fluent 样式

<ActionSheet
  type="confirm"
  :skinMode="'fluent'"
  :visible.sync="fluentConfirmShow"
  :header="buttonHeader"
  :options="confirmOptions"
  :destructiveButtonIndex="0"
  @onClickMenu="buttonClick"
  @onDelete="handleDelete"
  />

API

属性	说明	类型	默认值
`visible`	显示或隐藏	Boolean	`false`
`type`	选择展示模式，可选值[`button`, `icon`, `share`, `confirm`]	String	`button`
`options`	列表选项	Array	`[]`
`header`	头部信息，包括 `thumb`, `title`, `message`，分别表示图标、标题、二级标题，不同模式下展示样式也有不同	Object	`{thumb: '', title: '', message: ''}`
`mask`	是否添加蒙版	Boolean	`true`
`maskClosable`	点击mask是否关闭	Boolean	`true`
`cancelButtonText`	取消按钮文本，只用于share模式	String	`取消`
`cancelButtonIndex`	取消按钮索引位置，share 模式中无此属性	Number	`--`
`destructiveButtonIndex`	按钮列表中破坏性按钮（一般为删除）的索引位置，该按钮自带onDelete回调方法，share 模式中无此属性	Boolean	`true`
`skinMode`	皮肤风格	String	`''`

Events

事件名称	说明	回调参数
`onCancel`	取消按钮点击回调函数	`void()`
`onDelete`	按钮列表中破坏性按钮回调函数	`当前点击项`
`onClickMenu`	列表按钮点击回调函数	`当前点击项`
`onClickMask`	点击蒙版回调函数	`void()`
`onClosed`	ActionSheet 关闭后回调函数	`void()`

1. ActionSheet 动作面板 APP 该方法或组件支持移动端小程序调用 PC 该方法或组件支持桌面端小程序调用

ActionSheet 动作面板 APP 该方法或组件支持移动端小程序调用 PC 该方法或组件支持桌面端小程序调用

规则

引入方式

代码演示

API

Events

ActionSheet 动作面板 APP
该方法或组件支持移动端小程序调用

PC
该方法或组件支持桌面端小程序调用