如何设置小程序对话框Dialog_移动开发平台 mPaaS(mPaaS)-阿里云帮助中心

用于重要信息的告知或操作的反馈，并附带少量的选项供用户进行操作。需要用户处理事务，又不希望跳转页面以致打断工作流程时，可以使用 Modal 在当前页面正中打开一个浮层，承载相应的操作。

属性

属性	类型	必填	默认值	说明
direction	'vertical' \| 'horizontal'	否	'vertical'	按钮排列方向
title	string	否	-	标题文字
content	string	否	-	内容文字
visible	boolean	是	false	是否可见，受控模式
duration	number	否	300	过渡动画时长，单位毫秒
maskClosable	boolean	否	true	点击蒙层关闭
disableScroll	boolean	否	true	弹窗展示时，是否禁止页面滚动
animation	boolean	否	true	是否开启过渡动画
zIndex	number	否	998	弹窗层级
className	string	否	-	类名

事件

事件名	说明	类型
onButtonTap	点击 Modal 组件内部按钮，触发回调	`(index: number ) => void`
onClose	组件关闭回调	`() => void`

插槽

名称	说明
default	弹窗内容

样式类

类名	说明
amd-dialog	整体样式
amd-dialog-vertical	整体样式
amd-dialog-horizontal	整体样式
amd-dialog-content	内容整体样式
amd-dialog-content-title	标题样式
amd-dialog-content-content	内容样式
amd-dialog-content-button-container	按钮区域样式
amd-dialog-content-button-container-vertical	按钮区域样式
amd-dialog-content-button-container-horizontal	按钮区域样式
amd-dialog-content-button	按钮样式

代码示例

基本使用

index.axml 的代码示例如下：

<view>
  <dialog
    content="人在天边月上明"
    buttonText="{{['我知道了']}}"
    visible="{{isNoBtnShow}}"
    onButtonTap="handleClose"
    onClose="handleClose">
  </dialog>
  <dialog
    content="人在天边月上明"
    buttonText="{{['我知道了']}}"
    visible="{{isMaskClosableShow}}"
    onButtonTap="handleClose"
    onClose="handleClose"
    maskClosable>
  </dialog>
  <dialog
    title="纵向"
    content="标题内容"
    buttonText="{{['长文案主操作', '更多','取消']}}"
    visible="{{isVerticalShow}}"
    direction="vertical"
    maskClosable="{{true}}"
    onClose="handleClose"
    onButtonTap="handleButtonTap">
  </dialog>

  <dialog
    title="横向"
    content="标题内容"
    buttonText="{{['辅助操作', '主操作']}}"
    visible="{{isHoriShow}}"
    maskClosable="{{true}}"
    direction="horizontal"
    onClose="handleClose"
    onButtonTap="handleButtonTap"/>

  <dialog
    title="自定义组件"
    content="标题内容"
    buttonText="{{['辅助操作', '主操作']}}"
    visible="{{isCusDialogShow}}"
    maskClosable="{{true}}"
    direction="horizontal"
    onClose="handleClose"
    onButtonTap="handleClose">
    <view class="input-container">
      <input-item placeholder="给朋友留言"></input-item>
    </view>
  </dialog>

  <dialog
    title="带大图"
    content="标题内容"
    buttonText="{{['辅助操作', '主操作']}}"
    imageSize="x-large"
    image="{{url}}" 
    visible="{{isLImgDialogShow}}" 
    maskClosable="{{true}}"
    direction="horizontal"
    onClose="handleClose"
    onButtonTap="handleClose"/>
  <demo-block title="基础用法">
    <view class="btn-list">
      <button  onTap="handleOpenNoBtn">最简单的小对话框</button>
      <button  onTap="handleOpenMaskClosable">点击遮罩关闭</button>
    </view>
  </demo-block>
  <demo-block title="操作按钮">
    <view class="btn-list">
      <button  onTap="handleOpenVertical">纵向</button>
      <button  onTap="handleOpenHori">横向</button>
    </view>
  </demo-block>
  <demo-block title="内容区域">
    <view class="btn-list">
      <button  onTap="handleOpenCus">自定义内容区域</button>
      <button  onTap="handleOpenLImg">带图</button>
    </view>
  </demo-block>
</view>

index.js 的代码示例如下：

Page({
  data: {
    isNoBtnShow: false,
    isMaskClosableShow: false,
    isVerticalShow: false,
    isHoriShow: false,
    isLImgDialogShow: false,
    isCusDialogShow: false,
    url: 'https://gw.alipayobjects.com/zos/rmsportal/yFeFExbGpDxvDYnKHcrs.png',
  },
  handleClose() {
    this.setData({
      isNoBtnShow: false,
      isMaskClosableShow: false,
      isVerticalShow: false,
      isHoriShow: false,
      isLImgDialogShow: false,
      isCusDialogShow: false,
    });
  },
  handleButtonTap(index) {
    my.alert({
      title: `点击了第${index + 1}个按钮`,
      complete: () => {
        this.handleClose();
      },
    });
  },
  handleOpenNoBtn() {
    this.setData({ isNoBtnShow: true });
  },
  handleOpenMaskClosable() {
    this.setData({ isMaskClosableShow: true });
  },
  handleOpenVertical() {
    this.setData({
      isVerticalShow: true,
    });
  },
  handleOpenHori() {
    this.setData({
      isHoriShow: true,
    });
  },
  handleOpenLImg() {
    this.setData({
      isLImgDialogShow: true,
    });
  },
  handleOpenCus() {
    this.setData({
      isCusDialogShow: true,
    });
  },
});

index.acss 的代码示例如下：

.deleteBtn {
  color: #f93a4a;
  font-weight: bolder;
}

.cancelBtn {
  color: #ccc;
}

.buttonBold,
.modalButtonBold .am-modal-footer {
  font-weight: bold;
}

.space {
  margin-top: 10px;
}

.slide {
  margin-top: 10px;
  padding-bottom: 10px;
}

.amd-input-item{
  border-color: #ccc;
}

.input-container{
  border: 1px solid #e5e5e5;
  padding: 8px 12px;
}

.a-input-content{
  font-size: 15px;
}

.a-input-placeholder{
  font-size:15px !important;
}

index.json 的代码示例如下：

{
  "usingComponents": {
    "dialog": "antd-mini/es/Dialog/index",
    "input-item": "antd-mini/es/InputItem/index",
    "button": "antd-mini/es/Button/index",
    "demo-block": "../../components/DemoBlock/index"
  }
}