Taroify

Dialog 弹出框

介绍

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

函数调用

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

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

组件调用

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

function TextDialog() {
  const [open, setOpen] = useState(false)
  return (
    <>
      <Cell
        title="提示弹窗"
        clickable
        bordered
        isLink
        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
        isLink
        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
        isLink
        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
        isLink
        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)	-