简介

fs-dialog 是基于 fs-popup 的居中弹窗（type: center）对话框组件，支持反馈、确认、多按钮等多种对话流样式，适用于消息提示、确认操作、简短问询等场景。支持标题、内容区、操作按钮（1-3 个）、主/辅操作、按钮类型自定义，内容区超长自动滚动，样式高度还原设计稿。

设计规范

• 居中弹窗，宽度自适应内容，最大宽度限制，圆角、阴影、分组间距等视觉细节与设计稿一致。
• 支持三种主要纯文本对话流样式：
  1. 简短问句/一句话提示
  2. 简短解释/说明
  3. 标题+内容区+操作区（支持多行、辅助操作、主操作、知晓型按钮等）
• 操作区支持 1-3 个按钮，主操作高亮，辅助操作居左。
• 内容区支持多行文本、对齐方式自适应，超长内容自动滚动。
• 按钮支持 type/style 多种自定义能力。

使用方法

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

{
  "usingComponents": {
    "fs-dialog": "ava-ui/fxui/fs-dialog/index"
  }
}

代码演示

1. 类型演示（type）

2. icon 演示

3. 输入型演示（input）

4. 富文本演示（richtext）

内容对齐方式

支持通过contentAlign属性设置content内容的对齐方式：

遮罩层配置

支持通过overlay属性自定义遮罩层的行为和样式：

API

属性

属性名	说明	类型	可选值/格式	默认值
show	是否显示	boolean	true/false	false
title	标题	string	—	—
content	内容区文本	string	—	—
contentAlign	内容对齐方式	string	left/center/right	center
actions	操作按钮组	array	[{text, type, style}]	[]
confirmButton	主操作按钮	object		{type:'primary'}
cancelButton	辅助操作按钮	object		—
extStyle	外部样式	string	—	''
zIndex	层级	number	—	10000
inputMode	是否为输入型	boolean	true/false	false
inputValue	输入框内容	string	—	''
inputPlaceholder	输入框占位符	string	—	''
inputMaxlength	最大输入长度	number	—	2000
overlay	遮罩层配置	object	透传给fs-overlay组件的属性	{}
richData	富文本数据	array	富文本节点数组	null
richDataStyle	富文本样式	string	CSS 样式字符串	''

按钮 type/style 说明：

• type: 'primary'（主操作橙色高亮，默认）/ 'normal'（普通灰色）/ 'danger'（红色警告）
• style: 行内样式

richData 数据结构说明：

[
  {
    context: "文本内容",           // 文本内容或图片URL
    type: "string",               // 类型：string(文本) 或 image(图片)
    color: "red",                 // 文字颜色
    fontSize: "16",               // 字体大小(px)
    fontWeight: "bold",           // 字体粗细
    textDecoration: "underline",  // 文字装饰
    width: "50",                  // 图片宽度(px)
    height: "50",                 // 图片高度(px)
    placeholder: "占位图URL",      // 图片占位符
    onClick: function() {}        // 点击事件回调
  }
]

Slot

名称	说明
默认	内容区自定义

事件

事件名	说明	回调参数
onAction	点击操作按钮
onConfirm	点击主操作按钮	confirmButton
onCancel	点击辅助操作按钮	cancelButton
onBackClose	物理返回键关闭（透传自fs-popup）	event
onInput	输入内容变化	value（当前输入内容）
overlayClick	点击遮罩层	event
overlayEnter	遮罩层进入	event
overlayLeave	遮罩层离开	event

设计说明

• 居中弹窗，宽度自适应内容，最大宽度限制，圆角、阴影、分组间距等视觉细节与设计稿一致。
• 操作区支持 1-3 个按钮，主操作高亮，辅助操作居左，支持 type/style 自定义。
• 内容区支持多行文本、对齐方式自适应，超长内容自动滚动。
• 支持富文本内容显示，包括文字样式、图片、点击交互等功能。
• 富文本与普通文本内容互斥，优先显示富文本。
• 支持 Android 物理返回键关闭弹窗。
• 变量全部用 var.wxss，风格统一。

contentAlign 属性说明

contentAlign 属性用于设置 content 内容的对齐方式，支持以下三种对齐方式：

• center（默认）：居中对齐，适合简短的提示文本
• left：左对齐，适合较长的文本内容，提升阅读体验
• right：右对齐，适合特殊场景或特定设计需求

使用示例

<!-- 居中对齐（默认） -->
<fs-dialog
  show="{{showDialog}}"
  title="提示"
  content="这是一段简短的提示文本"
  contentAlign="center"
/>

<!-- 左对齐，适合长文本 -->
<fs-dialog
  show="{{showDialog}}"
  title="详细说明"
  content="这是一段较长的文本内容，使用左对齐可以提升阅读体验..."
  contentAlign="left"
/>

<!-- 右对齐 -->
<fs-dialog
  show="{{showDialog}}"
  title="特殊场景"
  content="右对齐的文本内容"
  contentAlign="right"
/>

overlay 属性配置

overlay 属性用于配置遮罩层的行为，支持透传给 fs-overlay 组件的所有属性。默认情况下，dialog 不允许点击遮罩关闭（closeOnOverlayClick: false），适合强交互/强制确认场景。

overlay: {
  closeOnOverlayClick: true,        // 允许点击遮罩关闭
  backgroundColor: 'rgba(0,0,0,0.5)', // 自定义遮罩背景色
  duration: 500,                    // 动画时长
  zIndex: 12000                     // 遮罩层级
}

使用示例

<!-- 允许点击遮罩关闭的dialog -->
<fs-dialog
  show="{{showDialog}}"
  title="提示"
  content="点击遮罩可以关闭"
  overlay="{{overlayConfig}}"
>
</fs-dialog>

data: {
  overlayConfig: {
    closeOnOverlayClick: true,
    backgroundColor: 'rgba(59, 130, 246, 0.3)'
  }
}

打开预览

---

如需更多自定义能力，请参考 `