Dialog 弹出框

介绍

弹出模态框,常用于消息提示、消息确认、在当前页面内完成特定的交互操作

弹出框组件支持函数调用和组件调用两种方式

引入

app.jsonindex.json中引入组件,详细介绍见快速上手

  1. "usingComponents": {
  2. "van-dialog": "path/to/@vant/weapp/dist/dialog/index"
  3. }

代码演示

消息提示

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

  1. <van-dialog id="van-dialog" />
  1. import Dialog from 'path/to/@vant/weapp/dist/dialog/dialog';
  2. Dialog.alert({
  3. title: '标题',
  4. message: '弹窗内容'
  5. }).then(() => {
  6. // on close
  7. });
  8. Dialog.alert({
  9. message: '弹窗内容'
  10. }).then(() => {
  11. // on close
  12. });

消息确认

用于确认消息,包含取消和确认按钮

  1. Dialog.confirm({
  2. title: '标题',
  3. message: '弹窗内容'
  4. }).then(() => {
  5. // on confirm
  6. }).catch(() => {
  7. // on cancel
  8. });

异步关闭

设置asyncClose属性开启异步关闭,开启后可以手动调用Dialog.close方法关闭弹窗

  1. Dialog.confirm({
  2. title: '标题',
  3. message: '弹窗内容'
  4. asyncClose: true
  5. })
  6. .then(() => {
  7. setTimeout(() => {
  8. Dialog.close();
  9. }, 1000);
  10. })
  11. .catch(() => {
  12. Dialog.close();
  13. });

组件调用

通过组件调用 Dialog 时,可以实现自定义弹窗内容、监听微信开放能力回调事件等功能,具体参考下例

  1. <van-dialog
  2. use-slot
  3. title="标题"
  4. show="{{ show }}"
  5. show-cancel-button
  6. confirm-button-open-type="getUserInfo"
  7. bind:close="onClose"
  8. bind:getuserinfo="getUserInfo"
  9. >
  10. <image src="https://img.yzcdn.cn/1.jpg" />
  11. </van-dialog>
Page({
  data: {
    show: true
  },

  getUserInfo(event) {
    console.log(event.detail);
  },

  onClose() {
    this.setData({ close: false });
  }
});

API

方法

方法名参数返回值介绍
DialogoptionsPromise展示弹窗
Dialog.alertoptionsPromise展示消息提示弹窗
Dialog.confirmoptionsPromise展示消息确认弹窗
Dialog.setDefaultOptionsoptionsvoid修改默认配置,对所有 Dialog 生效
Dialog.resetDefaultOptions-void重置默认配置,对所有 Dialog 生效
Dialog.close-void关闭弹窗
Dialog.stopLoading-void停止按钮的加载状态

Options

通过函数调用 Dialog 时,支持传入以下选项:

参数说明类型默认值版本
title标题string--
width弹窗宽度,默认单位为pxstring | number320px1.0.0
message文本内容,支持通过\n换行string-1.0.0
messageAlign内容对齐方式,可选值为left rightstringcenter-
zIndexz-index 层级number100-
className自定义类名,dialog在自定义组件内时无效string''-
customStyle自定义样式string''-
selector自定义选择器stringvan-dialog-
showConfirmButton是否展示确认按钮booleantrue-
showCancelButton是否展示取消按钮booleanfalse-
confirmButtonText确认按钮的文案string确认-
cancelButtonText取消按钮的文案string取消-
overlay是否展示遮罩层booleantrue-
overlayStyle自定义遮罩层样式object-1.0.0
closeOnClickOverlay点击遮罩层时是否关闭弹窗booleanfalse-
asyncClose是否异步关闭弹窗,开启后需要手动控制弹窗的关闭booleanfalse-
context选择器的选择范围,可以传入自定义组件的 this 作为上下文object当前页面-
transition动画名称,可选值为fade nonestringscale-
confirmButtonOpenType确认按钮的微信开放能力,具体支持可参考 微信官方文档string--

OpenType Options

使用confirmButtonOpenType后,支持以下选项:

参数说明类型默认值open-type
appParameter打开 APP 时,向 APP 传递的参数string-launchApp
lang指定返回用户信息的语言,zhCN 简体中文,zh_TW 繁体中文,en 英文_stringengetUserInfo
sessionFrom会话来源string-contact
businessId客服消息子商户 idnumber-contact
sendMessageTitle会话内消息卡片标题string当前标题contact
sendMessagePath会话内消息卡片点击跳转小程序路径string当前分享路径contact
sendMessageImgsendMessageImgstring截图contact
showMessageCard显示会话内消息卡片stringfalsecontact

Props

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

参数说明类型默认值
show是否显示弹窗boolean-
title标题string-
width弹窗宽度,默认单位为pxstring | number320px
message文本内容,支持通过\n换行string-
message-align内容对齐方式,可选值为left rightstringcenter
z-indexz-index 层级number100
class-name自定义类名,dialog在自定义组件内时无效string''
custom-style自定义样式string''
show-confirm-button是否展示确认按钮booleantrue
show-cancel-button是否展示取消按钮booleanfalse
confirm-button-text确认按钮的文案string确认
cancel-button-text取消按钮的文案string取消
confirm-button-color确认按钮的字体颜色string#1989fa
cancel-button-color取消按钮的字体颜色string#333
overlay是否展示遮罩层booleantrue
overlay-style自定义遮罩层样式object-
close-on-click-overlay点击遮罩层时是否关闭弹窗booleanfalse
use-slot是否使用自定义内容的插槽booleanfalse
use-title-slot是否使用自定义标题的插槽booleanfalse
async-close是否异步关闭弹窗,开启后需要手动控制弹窗的关闭booleanfalse
transition动画名称,可选值为fadestringscale
confirm-button-open-type确认按钮的微信开放能力,具体支持可参考 微信官方文档string-

OpenType Props

使用confirm-button-open-type后,支持以下 Props:

参数说明类型默认值open-type
app-parameter打开 APP 时,向 APP 传递的参数string-launchApp
lang指定返回用户信息的语言,zhCN 简体中文,zh_TW 繁体中文,en 英文_stringengetUserInfo
session-from会话来源string-contact
business-id客服消息子商户 idnumber-contact
send-message-title会话内消息卡片标题string当前标题contact
send-message-path会话内消息卡片点击跳转小程序路径string当前分享路径contact
send-message-imgsendMessageImgstring截图contact
show-message-card显示会话内消息卡片stringfalsecontact

Events

事件说明回调参数
bind:close弹窗关闭时触发event.detail: 触发关闭事件的来源,枚举为confirm,cancel,overlay
bind:confirm点击确认按钮时触发-
bind:cancel点击取消按钮时触发-
bind:getuserinfo点击确认按钮时,会返回获取到的用户信息,从返回参数的 detail 中获取到的值同 wx.getUserInfo-
bind:contact客服消息回调-
bind:getphonenumber获取用户手机号回调-
bind:error当使用开放能力时,发生错误的回调-
bind:opensetting在打开授权设置页后回调-

Slot

名称说明
title自定义title显示内容,如果设置了title属性则不生效

Dialog 弹出框 - 图1