Dialog 弹出框
介绍
弹出模态框,常用于消息提示、消息确认、在当前页面内完成特定的交互操作
弹出框组件支持函数调用和组件调用两种方式
引入
在app.json
或index.json
中引入组件,详细介绍见快速上手
"usingComponents": {
"van-dialog": "@vant/weapp/dialog/index"
}
代码演示
消息提示
用于提示一些消息,只包含一个确认按钮
<van-dialog id="van-dialog" />
import Dialog from 'path/to/@vant/weapp/dist/dialog/dialog';
Dialog.alert({
title: '标题',
message: '弹窗内容',
}).then(() => {
// on close
});
Dialog.alert({
message: '弹窗内容',
}).then(() => {
// on close
});
圆角样式
样式为圆角风格。
<van-dialog id="van-dialog" />
import Dialog from 'path/to/@vant/weapp/dist/dialog/dialog';
Dialog.alert({
title: '标题',
message: '弹窗内容',
theme: 'round-button',
}).then(() => {
// on close
});
Dialog.alert({
message: '弹窗内容',
theme: 'round-button',
}).then(() => {
// on close
});
消息确认
用于确认消息,包含取消和确认按钮
Dialog.confirm({
title: '标题',
message: '弹窗内容',
})
.then(() => {
// on confirm
})
.catch(() => {
// on cancel
});
异步关闭
设置asyncClose
属性开启异步关闭,开启后可以手动调用Dialog.close
方法关闭弹窗
Dialog.confirm({
title: '标题',
message: '弹窗内容'
asyncClose: true
})
.then(() => {
setTimeout(() => {
Dialog.close();
}, 1000);
})
.catch(() => {
Dialog.close();
});
组件调用
通过组件调用 Dialog 时,可以实现自定义弹窗内容、监听微信开放能力回调事件等功能,具体参考下例
<van-dialog
use-slot
title="标题"
show="{{ show }}"
show-cancel-button
confirm-button-open-type="getUserInfo"
bind:close="onClose"
bind:getuserinfo="getUserInfo"
>
<image src="https://img.yzcdn.cn/1.jpg" />
</van-dialog>
Page({
data: {
show: true,
},
getUserInfo(event) {
console.log(event.detail);
},
onClose() {
this.setData({ close: false });
},
});
API
方法
方法名 | 参数 | 返回值 | 介绍 |
---|---|---|---|
Dialog | options | Promise | 展示弹窗 |
Dialog.alert | options | Promise | 展示消息提示弹窗 |
Dialog.confirm | options | Promise | 展示消息确认弹窗 |
Dialog.setDefaultOptions | options | void | 修改默认配置,对所有 Dialog 生效 |
Dialog.resetDefaultOptions | - | void | 重置默认配置,对所有 Dialog 生效 |
Dialog.close | - | void | 关闭弹窗 |
Dialog.stopLoading | - | void | 停止按钮的加载状态 |
Options
通过函数调用 Dialog 时,支持传入以下选项:
参数 | 说明 | 类型 | 默认值 | 版本 |
---|---|---|---|---|
title | 标题 | string | - | - |
width | 弹窗宽度,默认单位为px | string | number | 320px | 1.0.0 |
message | 文本内容,支持通过\n 换行 | string | - | 1.0.0 |
theme | 样式风格,可选值为round-button | string | default | |
messageAlign | 内容对齐方式,可选值为left right | string | center | - |
zIndex | z-index 层级 | number | 100 | - |
className | 自定义类名,dialog 在自定义组件内时无效 | string | ‘’ | - |
customStyle | 自定义样式 | string | ‘’ | - |
selector | 自定义选择器 | string | van-dialog | - |
showConfirmButton | 是否展示确认按钮 | boolean | true | - |
showCancelButton | 是否展示取消按钮 | boolean | false | - |
confirmButtonText | 确认按钮的文案 | string | 确认 | - |
cancelButtonText | 取消按钮的文案 | string | 取消 | - |
overlay | 是否展示遮罩层 | boolean | true | - |
overlayStyle | 自定义遮罩层样式 | object | - | 1.0.0 |
closeOnClickOverlay | 点击遮罩层时是否关闭弹窗 | boolean | false | - |
asyncClose | 是否异步关闭弹窗,开启后需要手动控制弹窗的关闭 | boolean | false | - |
context | 选择器的选择范围,可以传入自定义组件的 this 作为上下文 | object | 当前页面 | - |
transition | 动画名称,可选值为fade none | string | scale | - |
confirmButtonOpenType | 确认按钮的微信开放能力,具体支持可参考 微信官方文档 | string | - | - |
OpenType Options
使用confirmButtonOpenType
后,支持以下选项:
参数 | 说明 | 类型 | 默认值 | open-type |
---|---|---|---|---|
appParameter | 打开 APP 时,向 APP 传递的参数 | string | - | launchApp |
lang | 指定返回用户信息的语言,zh_CN 简体中文, zh_TW 繁体中文,en 英文 | string | en | getUserInfo |
sessionFrom | 会话来源 | string | - | contact |
businessId | 客服消息子商户 id | number | - | contact |
sendMessageTitle | 会话内消息卡片标题 | string | 当前标题 | contact |
sendMessagePath | 会话内消息卡片点击跳转小程序路径 | string | 当前分享路径 | contact |
sendMessageImg | sendMessageImg | string | 截图 | contact |
showMessageCard | 显示会话内消息卡片 | string | false | contact |
Props
通过组件调用 Dialog 时,支持以下 Props:
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
show | 是否显示弹窗 | boolean | - |
title | 标题 | string | - |
width | 弹窗宽度,默认单位为px | string | number | 320px |
message | 文本内容,支持通过\n 换行 | string | - |
theme | 样式风格,可选值为round-button | string | default |
message-align | 内容对齐方式,可选值为left right | string | center |
z-index | z-index 层级 | number | 100 |
class-name | 自定义类名,dialog 在自定义组件内时无效 | string | ‘’ |
custom-style | 自定义样式 | string | ‘’ |
show-confirm-button | 是否展示确认按钮 | boolean | true |
show-cancel-button | 是否展示取消按钮 | boolean | false |
confirm-button-text | 确认按钮的文案 | string | 确认 |
cancel-button-text | 取消按钮的文案 | string | 取消 |
confirm-button-color | 确认按钮的字体颜色 | string | #1989fa |
cancel-button-color | 取消按钮的字体颜色 | string | #333 |
overlay | 是否展示遮罩层 | boolean | true |
overlay-style | 自定义遮罩层样式 | object | - |
close-on-click-overlay | 点击遮罩层时是否关闭弹窗 | boolean | false |
use-slot | 是否使用自定义内容的插槽 | boolean | false |
use-title-slot | 是否使用自定义标题的插槽 | boolean | false |
async-close | 是否异步关闭弹窗,开启后需要手动控制弹窗的关闭 | boolean | false |
transition | 动画名称,可选值为fade | string | scale |
confirm-button-open-type | 确认按钮的微信开放能力,具体支持可参考 微信官方文档 | string | - |
OpenType Props
使用confirm-button-open-type
后,支持以下 Props:
参数 | 说明 | 类型 | 默认值 | open-type |
---|---|---|---|---|
app-parameter | 打开 APP 时,向 APP 传递的参数 | string | - | launchApp |
lang | 指定返回用户信息的语言,zh_CN 简体中文, zh_TW 繁体中文,en 英文 | string | en | getUserInfo |
session-from | 会话来源 | string | - | contact |
business-id | 客服消息子商户 id | number | - | contact |
send-message-title | 会话内消息卡片标题 | string | 当前标题 | contact |
send-message-path | 会话内消息卡片点击跳转小程序路径 | string | 当前分享路径 | contact |
send-message-img | sendMessageImg | string | 截图 | contact |
show-message-card | 显示会话内消息卡片 | string | false | contact |
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 属性则不生效 |