简介

fs-action-sheet-m 提供了对 fs-action-sheet 组件的模块化调用能力，支持通过 DialogCenter 统一管理动作面板。适用于分享、选择、操作等场景，API 友好，支持 Promise 风格回调。支持列表和宫格两种展示类型，可自定义标题、副标题、图标等。

使用方法

局部引入，在需要引入的页面或组件的 index.json 中配置：

"usingComponents": {
  "dialog-center": "ava-ui/fxui/DialogCenter/DialogCenter"
}

模块调用

import dialogSet from "ava-ui/fxui/DialogCenter/DialogSet";

// 显示动作面板
dialogSet.fsActionSheet.show({
  displayType: 'center',
  supportIcon: false,
  title: '选择操作',
  subtitle: '请选择要执行的操作',
  options: [
    { label: '选项1', icon: 'star' },
    { label: '选项2', icon: 'like' }
  ],
  showCancel: true,
  cancelText: '取消',
  success: (res) => {
    console.log('选择结果:', res);
  },
  onClose: (res) => {
    console.log('关闭面板:', res);
  }
});

代码演示

列表展示类型

支持两种列表展示类型，满足不同场景需求：

• 居中列表（center）：选项居中对齐，适用于操作按钮等场景
• 居左列表（left）：选项左对齐，适用于菜单选择等场景

宫格展示类型

宫格布局适用于功能入口、分享等场景，支持图标和文字的组合展示：

• 支持图片和字体图标
• 自动换行布局
• 支持禁用状态

选项状态

支持设置选项的禁用状态，禁用状态的选项不可点击：

• 通过 status: 'disabled' 设置禁用状态
• 禁用状态的选项会显示灰色样式
• 点击禁用选项不会触发事件

超长内容

支持超长内容的滚动展示，自动计算内容高度：

• 内容超出时自动显示滚动条
• 支持增强滚动体验
• 自动隐藏滚动条

API

参数

参数	说明	类型	可选值/格式	默认值
displayType	展示类型	string	center/left/grid	'center'
supportIcon	是否支持图标（仅列表模式生效）	boolean	true/false	false
title	标题	string	—	''
subtitle	副标题	string	—	''
options	选项数据列表	array	[{label, icon, subtitle, status}]	[]
showCancel	是否显示取消按钮	boolean	true/false	true
cancelText	取消按钮文本	string	—	'取消'
success	选择选项的回调函数	function	(res) => {}	—
onClose	关闭面板的回调函数	function	(res) => {}	—

选项数据格式

// 选项数据格式
const options = [
  {
    label: '选项1',           // 选项文本
    icon: 'star',            // 图标（字体图标名或图片URL）
    subtitle: '副标题',       // 副标题（仅列表模式支持）
    status: 'normal'         // 状态：normal（正常）/ disabled（禁用）
  },
  // ... 更多选项
]

展示类型说明

列表模式（center/left）

• center：选项居中对齐，适用于操作按钮等场景
• left：选项左对齐，适用于菜单选择等场景
• 支持 supportIcon 属性显示图标
• 支持 subtitle 显示副标题

宫格模式（grid）

• 自动换行布局
• 支持图片和字体图标
• 图标和文字垂直排列
• 不支持副标题

回调函数

success 回调

当用户点击选项时触发，返回选项信息：

success: (res) => {
  console.log('选择的选项:', res);
  // res: { idx: 0, tag: { label: '选项1', icon: 'star' } }
}

onClose 回调

当用户关闭面板时触发：

onClose: (res) => {
  console.log('关闭面板:', res);
  // res: { cancel: true, detail: { cancel: true } }
}

注意事项

• 组件会自动处理物理返回键的关闭事件
• 宫格模式下不支持 supportIcon 属性
• 禁用状态的选项不会触发 success 回调
• 内容超出时会自动显示滚动条
• 取消按钮文本支持国际化配置
• 组件会自动销毁，无需手动管理生命周期

打开预览