codecamp

Vant4 Dialog 弹出框

介绍

弹出模态框,常用于消息提示、消息确认,或在当前页面内完成特定的交互操作。支持组件调用和函数调用两种方式。

引入

通过以下方式来全局注册组件,更多注册方式请参考组件注册

import { createApp } from 'vue';
import { Dialog } from 'vant';

const app = createApp();
app.use(Dialog);

函数调用

为了便于使用 ​Dialog​,Vant 提供了一系列辅助函数,通过辅助函数可以快速唤起全局的弹窗组件。

比如使用 ​showDialog​ 函数,调用后会直接在页面中渲染对应的弹出框。

import { showDialog } from 'vant';

showDialog({ message: '提示' });

代码演示

消息提示

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

import { showDialog } from 'vant';

showDialog({
  title: '标题',
  message: '代码是写出来给人看的,附带能在机器上运行。',
}).then(() => {
  // on close
});

showDialog({
  message: '生命远不止连轴转和忙到极限,人类的体验远比这辽阔、丰富得多。',
}).then(() => {
  // on close
});

消息确认

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

import { showConfirmDialog } from 'vant';

showConfirmDialog({
  title: '标题',
  message:
    '如果解决方法是丑陋的,那就肯定还有更好的解决方法,只是还没有发现而已。',
})
  .then(() => {
    // on confirm
  })
  .catch(() => {
    // on cancel
  });

圆角按钮风格

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

import { showDialog } from 'vant';

showDialog({
  title: '标题',
  message: '代码是写出来给人看的,附带能在机器上运行。',
  theme: 'round-button',
}).then(() => {
  // on close
});

showDialog({
  message: '生命远不止连轴转和忙到极限,人类的体验远比这辽阔、丰富得多。',
  theme: 'round-button',
}).then(() => {
  // on close
});

异步关闭

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

import { showConfirmDialog } from 'vant';

const beforeClose = (action) =>
  new Promise((resolve) => {
    setTimeout(() => {
      if (action === 'confirm') {
        resolve(true);
      } else {
        // 拦截取消操作
        resolve(false);
      }
    }, 1000);
  });

showConfirmDialog({
  title: '标题',
  message:
    '如果解决方法是丑陋的,那就肯定还有更好的解决方法,只是还没有发现而已。',
  beforeClose,
});

使用 Dialog 组件

如果需要在 Dialog 内嵌入组件或其他自定义内容,可以直接使用 Dialog 组件,并使用默认插槽进行定制。使用前需要通过 ​app.use​ 等方式注册组件。

<van-dialog v-model:show="show" title="标题" show-cancel-button>
  <img src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg" />
</van-dialog>
import { ref } from 'vue';

export default {
  setup() {
    const show = ref(false);
    return { show };
  },
};

API

方法

Vant 中导出了以下 Dialog 相关的辅助函数:

方法名 说明 参数 返回值
showDialog 展示弹窗 options: DialogOptions Promise<void>
showConfirmDialog 展示消息确认弹窗 options: DialogOptions Promise<void>
closeDialog 关闭弹窗 - void
setDialogDefaultOptions 修改默认配置,影响所有的 showDialog 调用 options: DialogOptions void
resetDialogDefaultOptions 重置默认配置,影响所有的 showDialog 调用 - void

DialogOptions

调用 ​showDialog​ 等方法时,支持传入以下选项:

参数 说明 类型 默认值
title 标题 string -
width 弹窗宽度,默认单位为 px number | string 320px
message 文本内容,支持通过 \n 换行 string | () => JSX.ELement -
messageAlign 内容对齐方式,可选值为 left right string center
theme 样式风格,可选值为 round-button string default
className 自定义类名 string | Array | object -
showConfirmButton 是否展示确认按钮 boolean true
showCancelButton 是否展示取消按钮 boolean false
confirmButtonText 确认按钮文案 string 确认
confirmButtonColor 确认按钮颜色 string #ee0a24
confirmButtonDisabled v3.5.0 是否禁用确认按钮 boolean false
cancelButtonText 取消按钮文案 string 取消
cancelButtonColor 取消按钮颜色 string black
cancelButtonDisabled v3.5.0 是否禁用取消按钮 boolean false
overlay 是否展示遮罩层 boolean true
overlayClass 自定义遮罩层类名 string | Array | object -
overlayStyle 自定义遮罩层样式 object -
closeOnPopstate 是否在页面回退时自动关闭 boolean true
closeOnClickOverlay 是否在点击遮罩层后关闭弹窗 boolean false
lockScroll 是否锁定背景滚动 boolean true
allowHtml 是否允许 message 内容中渲染 HTML boolean false
beforeClose 关闭前的回调函数,返回 false 可阻止关闭,支持返回 Promise (action: string) => boolean | Promise<boolean> -
transition 动画类名,等价于 transition 的 name 属性 string -
teleport 指定挂载的节点,等同于 Teleport 组件的 to 属性 string | Element body

Props

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

参数 说明 类型 默认值
v-model:show 是否显示弹窗 boolean -
title 标题 string -
width 弹窗宽度,默认单位为 px number | string 320px
message 文本内容,支持通过 \n 换行 string | () => JSX.Element -
message-align 内容水平对齐方式,可选值为 left right justify string center
theme 样式风格,可选值为 round-button string default
show-confirm-button 是否展示确认按钮 boolean true
show-cancel-button 是否展示取消按钮 boolean false
confirm-button-text 确认按钮文案 string 确认
confirm-button-color 确认按钮颜色 string #ee0a24
confirm-button-disabled v3.5.0 是否禁用确认按钮 boolean false
cancel-button-text 取消按钮文案 string 取消
cancel-button-color 取消按钮颜色 string black
cancel-button-disabled v3.5.0 是否禁用取消按钮 boolean false
z-index 将弹窗的 z-index 层级设置为一个固定值 number | string 2000+
overlay 是否展示遮罩层 boolean true
overlay-class 自定义遮罩层类名 string -
overlay-style 自定义遮罩层样式 object -
close-on-popstate 是否在页面回退时自动关闭 boolean true
close-on-click-overlay 是否在点击遮罩层后关闭弹窗 boolean false
lazy-render 是否在显示弹层时才渲染节点 boolean true
lock-scroll 是否锁定背景滚动 boolean true
allow-html 是否允许 message 内容中渲染 HTML boolean false
before-close 关闭前的回调函数,返回 false 可阻止关闭,支持返回 Promise (action: string) => boolean | Promise<boolean> -
transition 动画类名,等价于 transition 的 name 属性 string -
teleport 指定挂载的节点,等同于 Teleport 组件的 to 属性 string | Element -

Events

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

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

Slots

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

名称 说明
default 自定义内容
title 自定义标题
footer v3.0.11 自定义底部按钮区域

类型定义

组件导出以下类型定义:

import type {
  DialogProps,
  DialogTheme,
  DialogMessage,
  DialogOptions,
  DialogMessageAlign,
} from 'vant';

主题定制

样式变量

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

名称 默认值 描述
--van-dialog-width 320px -
--van-dialog-small-screen-width 90% -
--van-dialog-font-size var(--van-font-size-lg) -
--van-dialog-transition var(--van-duration-base) -
--van-dialog-radius 16px -
--van-dialog-background var(--van-background-2) -
--van-dialog-header-font-weight var(--van-font-bold) -
--van-dialog-header-line-height 24px -
--van-dialog-header-padding-top 26px -
--van-dialog-header-isolated-padding var(--van-padding-lg) 0 -
--van-dialog-message-padding var(--van-padding-lg) -
--van-dialog-message-font-size var(--van-font-size-md) -
--van-dialog-message-line-height var(--van-line-height-md) -
--van-dialog-message-max-height 60vh -
--van-dialog-has-title-message-text-color var(--van-gray-7) -
--van-dialog-has-title-message-padding-top var(--van-padding-xs) -
--van-dialog-button-height 48px -
--van-dialog-round-button-height 36px -
--van-dialog-confirm-button-text-color var(--van-primary-color) -

常见问题

引用 showDialog 时出现编译报错?

如果引用 ​showDialog​ 方法时出现以下报错,说明项目中使用了 ​babel-plugin-import​ 插件,导致代码被错误编译。

These dependencies were not found:

* vant/es/show-dialog in ./src/xxx.js
* vant/es/show-dialog/style in ./src/xxx.js

Vant 从 4.0 版本开始不再支持 ​babel-plugin-import​ 插件,请参考 迁移指南 移除该插件。

在 beforeRouteLeave 里调用 Dialog 无法展示?

将 ​closeOnPopstate​ 属性设置为 false 即可。

Dialog.alert({
  title: '标题',
  message: '弹窗内容',
  closeOnPopstate: false,
}).then(() => {
  // on close
});


Vant4 ActionSheet 动作面板
Vant4 DropdownMenu 下拉菜单
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }