Dialog 弹出框

介绍

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

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

函数调用

Dialog 是一个函数,调用后会直接在页面中弹出相应的模态框。

  1. import { Dialog } from 'vant';
  2. Dialog({ message: '提示' });

组件调用

通过组件调用 Dialog 时,可以通过下面的方式进行注册:

  1. import { createApp } from 'vue';
  2. import { Dialog } from 'vant';
  3. // 全局注册
  4. const app = createApp();
  5. app.use(Dialog);
  6. // 局部注册
  7. export default {
  8. components: {
  9. [Dialog.Component.name]: Dialog.Component,
  10. },
  11. };

代码演示

消息提示

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

  1. Dialog.alert({
  2. title: '标题',
  3. message: '弹窗内容',
  4. }).then(() => {
  5. // on close
  6. });
  7. Dialog.alert({
  8. message: '弹窗内容',
  9. }).then(() => {
  10. // on close
  11. });

消息确认

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

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

圆角按钮风格

将 theme 选项设置为 round-button 可以展示圆角按钮风格的弹窗。

  1. Dialog.alert({
  2. title: '标题',
  3. message: '弹窗内容',
  4. theme: 'round-button',
  5. }).then(() => {
  6. // on close
  7. });
  8. Dialog.alert({
  9. message: '弹窗内容',
  10. theme: 'round-button',
  11. }).then(() => {
  12. // on close
  13. });

异步关闭

通过 beforeClose 属性可以传入一个回调函数,在弹窗关闭前进行特定操作。

  1. const beforeClose = (action, done) =>
  2. new Promsie((resolve) => {
  3. setTimeout(() => {
  4. if (action === 'confirm') {
  5. resolve(true);
  6. } else {
  7. // 拦截取消操作
  8. resolve(false);
  9. }
  10. }, 1000);
  11. });
  12. Dialog.confirm({
  13. title: '标题',
  14. message: '弹窗内容',
  15. beforeClose,
  16. });

全局方法

通过 app.use 注册 Dialog 组件后,会自动在 app 的所有子组件上挂载 $dialog 方法,在所有组件内部都可以直接调用此方法。

  1. export default {
  2. mounted() {
  3. this.$dialog.alert({
  4. message: '弹窗内容',
  5. });
  6. },
  7. };

组件调用

如果需要在弹窗内嵌入组件或其他自定义内容,可以使用组件调用的方式。

  1. <van-dialog v-model:show="show" title="标题" show-cancel-button>
  2. <img src="https://img.yzcdn.cn/vant/apple-3.jpg" />
  3. </van-dialog>
  1. import { ref } from 'vue';
  2. export default {
  3. setup() {
  4. const show = ref(false);
  5. return { show };
  6. },
  7. };

API

方法

方法名说明参数返回值
Dialog展示弹窗optionsPromise
Dialog.alert展示消息提示弹窗optionsPromise
Dialog.confirm展示消息确认弹窗optionsPromise
Dialog.setDefaultOptions修改默认配置,对所有 Dialog 生效optionsvoid
Dialog.resetDefaultOptions重置默认配置,对所有 Dialog 生效-void
Dialog.close关闭弹窗-void

Options

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

参数说明类型默认值
title标题string-
width弹窗宽度,默认单位为pxnumber | string320px
message文本内容,支持通过\n换行string-
messageAlign内容对齐方式,可选值为left rightstringcenter
theme样式风格,可选值为roundstringdefault
className自定义类名any-
showConfirmButton是否展示确认按钮booleantrue
showCancelButton是否展示取消按钮booleanfalse
confirmButtonText确认按钮文案string确认
confirmButtonColor确认按钮颜色string#ee0a24
cancelButtonText取消按钮文案string取消
cancelButtonColor取消按钮颜色stringblack
overlay是否展示遮罩层booleantrue
overlayClass自定义遮罩层类名string-
overlayStyle自定义遮罩层样式object-
closeOnPopstate是否在页面回退时自动关闭booleantrue
closeOnClickOverlay是否在点击遮罩层后关闭弹窗booleanfalse
lockScroll是否锁定背景滚动booleantrue
allowHtml v2.8.7是否允许 message 内容中渲染 HTMLbooleanfalse
beforeClose关闭前的回调函数,
调用 done() 后关闭弹窗,
调用 done(false) 阻止弹窗关闭
(action, done) => void-
transition动画类名,等价于 transtionname属性string-
teleport指定挂载的节点,用法示例string | Elementbody

Props

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

参数说明类型默认值
v-model是否显示弹窗boolean-
title标题string-
width弹窗宽度,默认单位为 pxnumber | string320px
message文本内容,支持通过 \n 换行string-
message-align内容对齐方式,可选值为 left rightstringcenter
theme样式风格,可选值为 round-buttonstringdefault
show-confirm-button是否展示确认按钮booleantrue
show-cancel-button是否展示取消按钮booleanfalse
confirm-button-text确认按钮文案string确认
confirm-button-color确认按钮颜色string#ee0a24
cancel-button-text取消按钮文案string取消
cancel-button-color取消按钮颜色stringblack
overlay是否展示遮罩层booleantrue
overlay-class自定义遮罩层类名string-
overlay-style自定义遮罩层样式object-
close-on-popstate是否在页面回退时自动关闭booleantrue
close-on-click-overlay是否在点击遮罩层后关闭弹窗booleanfalse
lazy-render是否在显示弹层时才渲染节点booleantrue
lock-scroll是否锁定背景滚动booleantrue
allow-html v2.8.7是否允许 message 内容中渲染 HTMLbooleanfalse
before-close关闭前的回调函数,返回 false 可阻止关闭,支持返回 Promise(action) => boolean | Promise-
transition动画类名,等价于 transtionname 属性string-
teleport指定挂载的节点,用法示例string | Element-

Events

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

事件说明回调参数
confirm点击确认按钮时触发-
cancel点击取消按钮时触发-
open打开弹窗时触发-
close关闭弹窗时触发-
opened打开弹窗且动画结束后触发-
closed关闭弹窗且动画结束后触发-

Slots

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

名称说明
default自定义内容
title自定义标题

样式变量

组件提供了下列 Less 变量,可用于自定义样式,使用方法请参考主题定制

名称默认值描述
@dialog-width320px-
@dialog-small-screen-width90%-
@dialog-font-size@font-size-lg-
@dialog-transition@animation-duration-base-
@dialog-border-radius16px-
@dialog-background-color@white-
@dialog-header-font-weight@font-weight-bold-
@dialog-header-line-height24px-
@dialog-header-padding-top26px-
@dialog-header-isolated-padding@padding-lg 0-
@dialog-message-padding@padding-lg-
@dialog-message-font-size@font-size-md-
@dialog-message-line-height@line-height-md-
@dialog-message-max-height60vh-
@dialog-has-title-message-text-color@gray-7-
@dialog-has-title-message-padding-top@padding-xs-
@dialog-button-height48px-
@dialog-round-button-height36px-
@dialog-confirm-button-text-color@red-

Dialog 弹出框 - 图1