先看 通用。同类：基础 · 表单 · 导航 · 展示 · 反馈 · 布局

反馈

盖在当前页上的弹层、对话框、气泡、轻提示和背景蒙层。

Popup 弹层

盖在当前页上的弹层，不是新页面。内容用 body / children，里面可以放表单、卡片、列表，也可以嵌 自定义组件。显示隐藏和其它组件一样：写 showIf，用 this.setData 改那个字段，或 this.showPopup('open') / this.hidePopup('open')（也可写弹层 id），见 页面事件 · 页面方法。遮罩跟弹层共用这个条件，点遮罩会把该字段写成 false。打开关闭自带过渡：底部上滑、顶部下滑、侧边滑入、居中缩放淡入，遮罩同时淡入淡出。

写在页面根上的 popups 里，或 body 里用 type: popup（同样画到最上层，不占正文布局）。

参数名	类型	说明
showIf	String	为真时显示弹层和遮罩
id	String	可选标记
position	String	bottom（默认）/ top / left / right / center。也可用 上 下 左 右 中
title	String	有则显示顶栏（取消会把 showIf 写成 false）
mask	Boolean	是否显示遮罩，默认 true
closeOnMask	Boolean	点遮罩是否关闭，默认 true
width / height	Number / String	数字 dp，或 "80%"。底部/顶部默认为满宽；侧边默认宽 80%；居中默认宽 80%
style.radius	Number	圆角 dp，默认 12。只圆内侧：底部圆上面两角，顶部只圆下面两角（上面两角为 0），侧边圆内侧，居中四角都圆
style.radiusTopLeft / radiusTopRight / radiusBottomRight / radiusBottomLeft	Number	单独指定某一角
style.background	String	背景色，默认 #FFFFFF
style.borderColor	String	边框颜色；只写颜色时宽度默认 1
style.borderWidth	Number	边框宽度 dp
body / children	Array	弹层里的节点，和页面 body 一样。嵌自定义组件在这里写 { "type": "choose" }。见 组件结构

{
  "body": [
    { "type": "button", "text": "编辑", "onTap": "onOpenForm" }
  ],
  "popups": [
    {
      "title": "编辑备注",
      "position": "bottom",
      "showIf": "formOpen",
      "body": [
        { "type": "textarea", "name": "remark", "label": "备注" },
        { "type": "button", "text": "保存", "onTap": "onSaveForm" }
      ]
    }
  ]
}

弹层里要嵌自定义组件，写在 body 里。组件怎么写见 组件结构，和父页怎么传数据见 父页交互。

{
  "popups": [
    {
      "title": "选关键词",
      "position": "bottom",
      "showIf": "open",
      "body": [
        { "type": "choose", "id": "picker", "onConfirm": "onPicked" }
      ]
    }
  ]
}

ActionSheet 动作面板

从底部弹出一组操作。和 Popup 一样用 showIf 控制，点选项后关闭并触发 onChange。点遮罩或取消关闭。

参数名	类型	说明
showIf	String	为真时显示
title	String	顶部说明
items / options	Array	{ text, value } 或字符串
name	String	选中后写入 data 的键
cancelText / cancel	String	取消按钮文案，默认 取消
onChange / onSelect	String	点某一项时调用，e.value 为该项值

{
  "type": "actionSheet",
  "showIf": "open",
  "title": "选择来源",
  "items": [
    { "text": "拍照", "value": "camera" },
    { "text": "从相册选择", "value": "album" }
  ]
}

Dialog 对话框

居中确认框，带标题、说明和取消 / 确定。用 showIf 控制显示，点确定或取消会关掉并调用 onConfirm / onCancel。

参数名	类型	说明
showIf	String	为真时显示
title	String	标题
text / message	String	说明
cancelText / cancel	String	取消文案，默认 取消。hideCancel: true 只留确定
confirmText / okText	String	确定文案，默认 确定
mask	Boolean	遮罩，默认 true
closeOnMask	Boolean	点遮罩关闭，默认 true
onConfirm	String	点确定
onCancel	String	点取消或点遮罩
style.color	String	确定按钮颜色。不写则跟 window.theme.primary

{
  "type": "dialog",
  "showIf": "open",
  "title": "确认删除",
  "text": "删除后无法恢复",
  "onConfirm": "onOk"
}

{ "type": "dialog", "showIf": "open", "title": "确认", "text": "确定按钮用 style.color", "style": { "color": "#1565C0" } }

Modal 弹窗

居中弹出的内容容器，里面可以放表单、按钮。和 Popup position: "center" 同类，默认居中。用 showIf 控制。

参数名	类型	说明
showIf	String	为真时显示
title	String	有则显示顶栏
body / children	Array	弹窗内容
mask	Boolean	默认 true
closeOnMask	Boolean	点遮罩关闭，默认 true
width / height	Number / String	默认宽约 80%

Popover 气泡弹出框

小气泡说明，贴在某个按钮或组件旁边，不是铺满屏幕底。四个角都是圆角，默认带指向触发组件的箭头。for / anchor 写触发组件的 id；不写则贴在最后点的那个组件旁。position 是相对触发组件的方向。

参数名	类型	说明
showIf	String	为真时显示
for / anchor / target	String	贴在哪个组件旁，对应那个组件的 id
text / title	String	气泡文案
position	String	相对触发组件：bottom（默认，在下方）/ top / left / right / center
arrow	Boolean	是否显示箭头，默认 true。position: center 时不显示
mask	Boolean	默认 true，点遮罩关闭
style.background	String	气泡底色，默认 #191C1C
style.color	String	文案颜色，默认白色
style.radius	Number	圆角，默认 8，四个角相同
body / children	Array	可选，气泡里再放组件

{ "type": "button", "id": "tip", "text": "显示说明", "onTap": "onOpen" }

{ "type": "popover", "for": "tip", "showIf": "open", "text": "点这里可以筛选", "position": "bottom" }

{
  "type": "popover",
  "for": "tip",
  "showIf": "open",
  "position": "top",
  "text": "浅色气泡",
  "style": { "background": "#FFFFFF", "color": "#191C1C" }
}

Toast 轻提示

短文案提示，不打断操作。两种用法：

1. 页面方法 this.toast('保存成功') 或 action: { type: "toast", text: "..." }，约 1.6 秒后消失
2. 组件 type: "toast" + showIf，自己控制显示隐藏

参数名	类型	说明
showIf	String	组件用法：为真时显示
text / title	String	提示文案
position	String	center（默认）/ top / bottom
mask	Boolean	默认 false
style.background	String	气泡底色。不写则为深色半透明
style.color	String	文字颜色。不写则为白色

{ "type": "button", "text": "保存", "action": { "type": "toast", "text": "已保存" } }

{ "type": "toast", "showIf": "blue", "text": "style.background / color", "style": { "background": "#1565C0", "color": "#FFFFFF" } }

Mask 背景蒙层

盖住整页的半透明层。和弹层自带的遮罩不同：Mask 是独立组件，用来压暗背景、阻止误点，也可以在上面叠加载、按钮。用 showIf 控制显示。别名 overlay。

参数名	类型	说明
showIf	String	为真时显示
opacity	Number	透明度 0～1，默认 0.4。大于 1 时按百分数，如 45 即 45%
color	String	black（默认）/ white，或 #RRGGBB / #AARRGGBB
style.background	String	直接指定蒙层色，优先于 color / opacity
closeOnTap / closeOnMask	Boolean	点空白是否关闭，默认 true
onTap	String	点空白时调用
body / children	Array	叠在蒙层上的内容，点内容不会关闭

{ "type": "mask", "showIf": "open", "opacity": 0.45 }

{
  "type": "mask",
  "showIf": "busy",
  "children": [{ "type": "loading", "text": "正在同步…" }]
}