@retailwe/ui-dialog v0.0.23

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:

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

Events