纷享销客开发者手册

简体中文

English

fs-action-sheet-m

约 1091 字大约 4 分钟

简介

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展示类型stringcenter/left/grid'center'
supportIcon是否支持图标（仅列表模式生效）booleantrue/falsefalse
title标题string—''
subtitle副标题string—''
options选项数据列表array[{label, icon, subtitle, status}][]
showCancel是否显示取消按钮booleantrue/falsetrue
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 回调
  • 内容超出时会自动显示滚动条
  • 取消按钮文本支持国际化配置
  • 组件会自动销毁，无需手动管理生命周期
打开预览