Dialog对话框

引入

{
  "usingComponents": {
    "x-dialog": "waft-ui/assembly/dialog/dialog"
  }
}

代码示例

<x-dialog 
    show="{{ showDialog }}"
  clickConfirm="clickConfirm"
  clickCancel="clickCancel"
  message="是否确认删除？">
  <view slot="title">标题</view>
</x-dialog>

效果展示

API

• props | 参数 | 说明 | 类型 | 默认值 | | —- | —- | —- | —- | | show | 是否显示对话框 | boolean | false | | overlay（待支持） | 是否显示遮罩层 | boolean | true | | title | 标题 | string | | | message | 文字内容（优先级高于slot） | string | | | zIndex | z-index层级 | number | 2000 | | overlay | 是否显示遮罩 | boolean | false | | showConfirmButton | 是否显示确认按钮 | boolean | true | | showCancelButton | 是否显示取消按钮 | boolean | true | | confirmButtonText | 确认按钮文本内容 | string | false | | cancelButtonText | 取消按钮文本内容 | string | false | | closeOnClickOverlay（待支持） | 点击遮罩时是否关闭弹窗 | boolean | true | | useFooterSlot | 是否使用底部插槽 | boolean | false |

• Event | 事件名 | 说明 | 参数 | | —- | —- | —- | | clickConfirm | 点击confirm按钮触发 | | | clickCancel | 点击cancel按钮触发 | |

• slot | 名称 | 说明 | | —- | —- | | title | 标题插槽，优先级低于title | | content | 内容插槽，优先级低于message | | footer | 底部插槽，需配合useFooterSlot使用 |