dialog 对话框

对话框组件是一种常见的用户界面组件，用于在应用程序中显示弹出窗口，以与用户进行交互或显示重要的信息。对话框通常用于提示用户关于操作确认、警告、错误信息、表单输入等。

Props参数

名称	类型	是否必传	默认值	描述
visible	boolean	✅	-	是否显示
title	ReactNode	否	-	标题内容
content	ReactNode	否	-	对话框内容 更建议直接使用children进行传递
closeable	boolean	否	false	显示右上角关闭按钮，点击将触发 onCancel
okText	ReactNode	否	-	确定文本
okColor	string	否	-	确定文字颜色
cancel	boolean	否	-	是否显示取消
cancelText	ReactNode	否	-	取消文本
cancelColor	string	否	-	取消文本颜色
footer	ReactNode | false	否	-	自定义底部 设为 false 时将不显示整个 footer 区域
okLoading	boolean	否	-	点击ok时是否显示loading 与onOk配合使用。设置为true时。onOk可以返回为一个Promise函数。 在函数执行期间。确定按钮会显示为一个loading状态

示例

import { memo, useState } from 'react'
import { View } from '@tarojs/components'
import MMDialog from '~/components/dialog'
import MMButton from '~/components/button'
import PageDemoBlock from '../_components/page-demo-block'
import MMPageContainer from '../_components/page-container'

const Component = () => {
  const [visible, setVisible] = useState(false)
  const [cusVisible, setCusVisible] = useState(false)
  const [asyVisible, setAsyVisible] = useState(false)
  const [cancelisible, setCancelVisible] = useState(false)
  const [customVisible, setCustomVisible] = useState(false)

  return (
    <MMPageContainer title="对话框">
      <PageDemoBlock title="基础使用">
        <MMButton onClick={() => setVisible(true)}>点击显示</MMButton>
        <MMDialog visible={visible} title="确认加入团队?" onOk={() => setVisible(false)} onCancel={() => setVisible(false)} />
      </PageDemoBlock>

      <PageDemoBlock title="自定义">
        <View>标题、按钮和按钮文本样式都可以修改</View>
        <MMButton onClick={() => setCusVisible(true)}>点击显示</MMButton>
        <MMDialog
          visible={cusVisible}
          title={
            <View>
              <View>一旦加入后不可解绑，</View>
              <View>确认同意该团队邀请？</View>
            </View>
          }
          okText="欣然接受"
          okColor="#F18300"
          cancelText="狠心拒绝"
          cancelColor="red"
          onOk={() => setCusVisible(false)}
          onCancel={() => setCusVisible(false)}
        />
      </PageDemoBlock>

      <PageDemoBlock title="异步关闭">
        <View>可以在点击确定时设置为异步处理</View>
        <MMButton onClick={() => setAsyVisible(true)}>点击显示</MMButton>
        <MMDialog
          visible={asyVisible}
          title="是否加入收藏"
          okLoading
          onOk={async () => {
            await new Promise<void>((resolve) => {
              setTimeout(() => {
                resolve()
                setAsyVisible(false)
              }, 1000)
            })
          }}
          onCancel={() => setAsyVisible(false)}
        >
          生命远不止连轴转和忙到极限，人类的体验远比这辽阔、丰富得多。
        </MMDialog>
      </PageDemoBlock>

      <PageDemoBlock title="不显示取消">
        <MMButton onClick={() => setCancelVisible(true)}>点击显示</MMButton>
        <MMDialog
          visible={cancelisible}
          title="这个弹窗不显示取消"
          cancel={false}
          onOk={() => setCancelVisible(false)}
          onCancel={() => setCancelVisible(false)}
        />
      </PageDemoBlock>

      <PageDemoBlock title="自定义底部">
        <MMButton onClick={() => setCustomVisible(true)}>点击显示</MMButton>
        <MMDialog
          visible={customVisible}
          title="这个弹窗不显示取消"
          footer={
            <MMButton block onClick={() => setCustomVisible(false)}>
              点击确定
            </MMButton>
          }
        />
      </PageDemoBlock>
    </MMPageContainer>
  )
}

const MMDialogPage = memo(Component)
export default MMDialogPage