@doraemon-ui/miniprogram.actionsheet

ActionSheet 动作面板

从底部弹出的操作菜单面板，提供两种主题风格（iOS / WeChat）。

安装

我们推荐使用 npm 或 yarn 的方式进行开发，不仅可在开发环境轻松调试，也可放心地在生产环境打包部署使用，享受整个生态圈和工具链带来的诸多好处。

npm install --save @doraemon-ui/miniprogram.actionsheet
# or
yarn add @doraemon-ui/miniprogram.actionsheet

如果你的网络环境不佳，推荐使用 cnpm。

使用指南

在 page.json 中引入组件

json

示例代码

在开发者工具中预览效果

WXML

wxml

JAVASCRIPT

js

API

ActionSheet props

export type ActionSheetButton = {
  /** 按钮文本 */
  text?: string
  /** 按钮图标 */
  icon?: string
  /** 类名 */
  className?: string
  /** 是否禁用 */
  disabled?: boolean
  /** 微信开放能力 */
  openType?: string
  /** 按下时自定义样式类 */
  hoverClass?: string
}

参数	类型	描述	默认值
prefixCls	string	自定义类名前缀	dora-actionsheet
theme	'ios' | 'wx'	主题风格	ios
titleText	string	标题文本	-
buttons	ActionSheetButton[]	操作按钮列表	[]
cancelText	string	取消按钮文本	取消
destructiveText	string	删除按钮文本	-
visible	boolean	是否可见	false
bind:action	(event: CustomEvent) => void	按钮点击事件，detail 包含 { method, button, index }	-
bind:cancel	() => void	取消按钮点击事件	-
bind:destructive	() => void	删除按钮点击事件	-
bind:close	() => void	关闭事件	-
bind:closed	() => void	关闭动画完成后的事件	-

ActionSheet slot

名称	描述
-	自定义内容

ActionSheet externalClasses

名称	描述
dora-class	根节点样式类

命令式调用

import { actionsheet } from '@doraemon-ui/miniprogram.actionsheet'

// 显示动作面板
const close = actionsheet.show({
  theme: 'ios',
  titleText: '请选择操作',
  buttons: [{ text: '选项一' }, { text: '选项二' }],
  cancelText: '取消',
  onCancel: () => {},
  onClose: () => {},
})

// 手动关闭
close()

// 关闭所有
actionsheet.clear()

CSS Variables

属性	描述	默认值	全局变量
--options-bg	选项组背景色（iOS 主题）	rgba(255, 255, 255, .65)	--dora-actionsheet-options-bg
--options-normal-bg	普通选项组背景色	@component-background	--dora-actionsheet-options-normal-bg
--options-cancel-bg	微信主题取消区域背景色	@component-background	--dora-actionsheet-options-cancel-bg
--options-active-bg	按钮按下时背景色	@active-state-bg	--dora-actionsheet-options-active-bg
--text-color	按钮文字颜色	#007aff	--dora-actionsheet-text-color
--border-color	按钮之间的分隔线颜色	@border-color-split	--dora-actionsheet-border-color
--destructive-text-color	删除按钮文字颜色	#ff3b30	--dora-actionsheet-destructive-text-color
--icon-size	按钮图标大小	20px	-
--border-radius	选项组圆角	12px	-
--margin	内容区域水平边距	10px	-