@retailwe/ui-dialog

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	点击取消按钮时触发	-