Dialog 弹出框

引入

"usingComponents": {
  "wr-dialog": "@retailwe/ui-dialog/index"
}

代码演示

基础用法

用于提示一些消息，只包含一个确认按钮

<wr-dialog
  show="{{show3}}"
  message="{{message}}"
  bindconfirm="confirm"
  showCancelButton="{{showCancelButton}}"
>
</wr-dialog>

Page({
  data: {
    show1: false,
    show2: false,
    show3: false,
    show7: false,
    show6: false,
    title: '标题',
    message: '弹框内容message',
    showCancelButton: true,
  },
  handleTap(e) {
    const { index } = e.currentTarget.dataset;
    if (index == 5) {
      Dialog.confirm({
        title: '标题',
        message: '编程式调用可以方便的回调~',
      })
        .then(() => {
          Toast({
            icon: 'success',
            text: '回调: 确定',
          });
        })
        .catch(() => {
          Toast({
            text: '回调: 取消',
          });
        });
    } else {
      this.setData({
        ['show' + index]: true,
      });
    }
  },
  dailogClose() {
    this.setData({
      show6: false,
    });
  },
});

API

Props

通过组件调用 Dialog 时，支持以下 Props:

| 参数 | 说明 | 类型 | 默认值 | | ----------------- | -------------------------- | --------------------------------- | ---------- | | show | 是否显示弹窗 | boolean | - | | title | 标题 | string | - | | message | 文本内容，支持通过\n换行 | string | - | | textAlign | message 的文本对齐方式 | 'center'|'left'|'right' | 'center' | | z-index | z-index 层级 | number | 100 | | showConfirmButton | 是否展示确认按钮 | boolean | true | | showCancelButton | 是否展示取消按钮 | boolean | false | | confirmButtonText | 确认按钮的文案 | string | 确认 | | cancelButtonText | 取消按钮的文案 | string | 取消 | | confirmOpenTypeValue | 确认按钮微信开放能力，可参考微信文档 | string | | |asyncClose|是否支持异步关闭弹窗，开启后需要手动关闭弹窗|boolean| false| | direction | 按钮排列方式 | _'row'|'column' | 'row' | | actions | 按钮列表 | array | - |

// `actions` props：
interface Action {
  name: string; // 按钮文案
  primary?: boolean; // 是否主要按钮（颜色与其他按钮不同）
  style?: string; // 自定义样式
}

Events

| 事件 | 说明 | 回调参数 | | ----------- | ------------------ | -------- | | bindconfirm | 点击确认按钮时触发 | - | | bindcancel | 点击取消按钮时触发 | - |