KeCheng

3.8 KiB

Raw Permalink Blame History Unescape Escape

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

title	description	spline	isComponent
ActionSheet 动作面板	由用户操作后触发的一种特定的模态弹出框，呈现一组与当前情境相关的两个或多个选项。	data	true

该组件于 0.9.0 版本上线，请留意版本。

引入

全局引入，在 miniprogram 根目录下的app.json中配置，局部引入，在需要引入的页面或组件的index.json中配置。

"usingComponents": {
  "t-action-sheet": "tdesign-miniprogram/action-sheet/action-sheet",
}

代码演示

组件类型

列表型动作面板

宫格型动作面板

组件状态

宫格型动作面板

组件样式

列表型对齐方式

支持指令调用

import ActionSheet, { ActionSheetTheme } from 'tdesign-miniprogram/action-sheet/index';

// 指令调用不同于组件引用不需要传入visible
const basicListOption: ActionSheetShowOption = {
  theme: ActionSheetTheme.List,
  selector: '#t-action-sheet',
  items: [
    {
      label: '默认选项',
    },
    {
      label: '失效选项',
      disabled: true,
    },
    {
      label: '警告选项',
      color: '#e34d59',
    },
  ],
};

const handler = ActionSheet.show(basicListOption);

指令调用的关闭如下

handler.close();

API

ActionSheet Props

名称	类型	默认值	说明	必传
align	String	center	`0.29.0`。水平对齐方式。可选项：center/left	N
cancel-text	String	-	设置取消按钮的文本	N
count	Number	8	设置每页展示菜单的数量，仅当 type=grid 时有效	N
description	String	-	`0.29.0`。动作面板描述文字	N
items	Array	-	必需。菜单项。TS 类型：`Array<string \| ActionSheetItem>` `interface ActionSheetItem {label: string; color?: string; disabled?: boolean }`。详细类型定义	Y
show-cancel	Boolean	true	是否显示取消按钮	N
theme	String	list	展示类型，列表和表格形式展示。可选项：list/grid	N
visible	Boolean	false	必需。显示与隐藏	Y
default-visible	Boolean	undefined	必需。显示与隐藏。非受控属性	Y
external-classes	Array	-	组件类名，用于设置组件外层元素类名。`['t-class', 't-class-content', 't-class-cancel']`	N

ActionSheet Events

名称	参数	描述
cancel	-	点击取消按钮时触发
close	`(trigger: TriggerSource)`	关闭时触发。详细类型定义。 `type TriggerSource = 'overlay' \| 'command' \| 'select'`
selected	`(selected: ActionSheetItem \| string, index: number)`	选择菜单项时触发

3.8 KiB Raw Permalink Blame History Unescape Escape

引入