• Vant React

Dialog 弹出框

介绍

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

函数调用

由于小程序不支持 DOM 操作，因此需要手动在页面（page）里挂载一个 Dialog 组件并指定 id 为 dialog。

function ImperativeDialog() {
  return (
    <>
      <Dialog id="dialog" />
      <Cell
        title="提示弹窗"
        clickable
        bordered
        rightIcon={<ArrowRight />}
        onClick={() => Dialog.alert("提示")}
      />
    </>
  )
}

组件调用

通过组件组合的方式调用 Dialog。

function TextDialog() {
  const [open, setOpen] = useState(false)
  return (
    <>
      <Cell
        title="提示弹窗"
        clickable
        bordered
        rightIcon={<ArrowRight />}
        onClick={() => setOpen(true)}
      />
      <Dialog open={open} onClose={setOpen}>
        <Dialog.Content>提示</Dialog.Content>
        <Dialog.Actions>
          <Button onClick={() => setOpen(false)}>确认</Button>
        </Dialog.Actions>
      </Dialog>
    </>
  )
}

代码演示

消息提示

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

function BasicDialog() {
  const [open, setOpen] = useState(false)
  return (
    <>
      <Cell
        title="提示弹窗"
        clickable
        bordered
        rightIcon={<ArrowRight />}
        onClick={() => setOpen(true)}
      />
      <Dialog open={open} onClose={setOpen}>
        <Dialog.Header>标题</Dialog.Header>
        <Dialog.Content>代码是写出来给人看的，附带能在机器上运行</Dialog.Content>
        <Dialog.Actions>
          <Button onClick={() => setOpen(false)}>确认</Button>
        </Dialog.Actions>
      </Dialog>
    </>
  )
}

消息确认

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

function ConfirmDialog() {
  const [open, setOpen] = useState(false)
  return (
    <>
      <Cell
        title="确认弹窗"
        clickable
        bordered
        rightIcon={<ArrowRight />}
        onClick={() => setOpen(true)}
      />
      <Dialog open={open} onClose={setOpen}>
        <Dialog.Header>标题</Dialog.Header>
        <Dialog.Content>代码是写出来给人看的，附带能在机器上运行</Dialog.Content>
        <Dialog.Actions>
          <Button onClick={() => setOpen(false)}>取消</Button>
          <Button onClick={() => setOpen(false)}>确认</Button>
        </Dialog.Actions>
      </Dialog>
    </>
  )
}

圆角按钮风格

将 actions.variant 选项设置为 rounded 可以展示圆角按钮风格的弹窗。

function RoundedDialog() {
  const [open, setOpen] = useState(false)
  return (
    <>
      <Cell
        title="提示弹窗"
        clickable
        bordered
        rightIcon={<ArrowRight />}
        onClick={() => setOpen(true)}
      />
      <Dialog open={open} onClose={setOpen}>
        <Dialog.Header>标题</Dialog.Header>
        <Dialog.Content>代码是写出来给人看的，附带能在机器上运行</Dialog.Content>
        <Dialog.Actions variant="rounded">
          <Button onClick={() => setOpen(false)}>取消</Button>
          <Button onClick={() => setOpen(false)}>确认</Button>
        </Dialog.Actions>
      </Dialog>
    </>
  )
}

API

Dialog Props

参数 说明 类型 默认值
defaultOpen 默认是否显示弹窗 boolean -
open 是否显示弹窗 boolean -
children 组件内容 ReactNode -

Dialog.Header Props

参数 说明 类型 默认值
children 标题内容 ReactNode -

Dialog.Content Props

参数 说明 类型 默认值
align 文本对齐方式，可选值为 left right string center
children 文本内容 ReactNode -

Dialog.Actions Props

参数 说明 类型 默认值
variant 样式风格，可选值为 rounded string default
children 按钮内容 ReactNode -

Dialog Options

参数 说明 类型 默认值
selector 自定义节点选择器 string toast
className 自定义类名 string -
style 自定义样式 CSSProperties -
title 标题 ReactNode -
message 文本内容，支持通过 \n 换行 ReactNode -
messageAlign 内容对齐方式，可选值为 left right string center
confirm 确认按钮 string | ButtonProps 确认
cancel 取消按钮 string | ButtonProps 取消
onConfirm 确认事件 () => void -
onCancel 取消事件 () => void -

Dialog Methods

方法名 参数 返回值 介绍
Dialog.open options | message - 展示弹窗
Dialog.alert options | message - 展示消息提示弹窗
Dialog.confirm options | message - 展示消息确认弹窗

主题定制

样式变量

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

名称 默认值 描述
—dialog-width 320px * $hd -
—dialog-small-screen-width 90% -
—dialog-font-size var(—font-size-lg) -
—dialog-transition var(—animation-duration-base) -
—dialog-border-radius 16px * $hd -
—dialog-background-color var(—white) -
—dialog-header-font-weight var(—font-weight-bold) -
—dialog-header-line-height 24px * $hd -
—dialog-header-padding-top 26px * $hd -
—dialog-header-isolated-padding var(—padding-lg) 0 -
—dialog-message-padding 26px * $hd var(—padding-lg) -
—dialog-message-font-size var(—font-size-md) -
—dialog-message-line-height var(—line-height-md) -
—dialog-message-max-height 60vh -
—dialog-has-title-message-color var(—gray-7) -
—dialog-has-title-message-padding-top var(—padding-xs) -
—dialog-button-height 48px * $hd -
—dialog-confirm-button-color var(—red) -
—dialog-footer-rounded-padding var(—padding-xs) var(—padding-lg) var(—padding-md) -
—dialog-rounded-button-active-color var(—white) -
—dialog-rounded-button-font-size var(—font-size-md) -
—dialog-rounded-button-height 36px * $hd -
—dialog-rounded-button-border-radius var(—border-radius-max) -
—dialog-rounded-confirm-button-background-color var(—gradient-red) -
—dialog-rounded-cancel-button-background-color var(—gradient-orange) -