引入

  1. {
  2.   "usingComponents": {
  3.     "x-nav-bar": "../assembly/nav-bar/nav-bar",
  4.     "x-button": "../assembly/button/button",
  5.     "x-dialog":"../assembly/dialog/dialog"
  6.   },
  7.   "state": {
  8.     "showDialog": false
  9.   }
  10. }

代码示例

  1. <x-dialog 
  2.     show="{{ showDialog }}"
  3.   clickConfirm="clickConfirm"
  4.   clickCancel="clickCancel"
  5.   message="是否确认删除？">
  6.   <view slot="title">标题</view>
  7. </x-dialog>

TS

  1. import { Event, Page, Props, console } from "waft";
  2. import { JSON, JSONObject } from "waft-json";
  3. export class ComponentTest extends Page {
  4.   constructor(props: Props) {
  5.     super(props);
  6.   }
  8.   clickDialogBtn(e: Event): void{
  9.     console.log("dadsada");
  10.     this.setState(
  11.       JSON.parseObject(`{"showDialog":true}`)
  12.     );
  13.   }
  15.   onConfirm(e: Event): void{
  16.     console.log("****关闭弹窗****");
  17.     this.setState(
  18.       JSON.parseObject(`{"showDialog":false}`)
  19.     );
  20.   }
  22.   onCancel(e: Event): void{
  23.     console.log("****关闭弹窗****");
  24.     this.setState(
  25.       JSON.parseObject(`{"showDialog":false}`)
  26.     );
  27.   }
  28. }

效果展示

dialog.png

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使用 |