ONO的在线文档库

Appearance

Modal 弹窗 ​

展示一个对话框，提供标题、内容区、操作区。

前置条件 ​

在react项目入口文件中引入样式，默认为src/main.tsx。

tsx
import 'ono-react-element/dist/style/Modal.css'

基础用法 ​

tsx
import { Button, Modal } from 'ono-react-element'

function App() {
    const handleModal = () => {
        Modal({
            title: '弹窗标题',
            content: '弹窗内容',
            okText: '确定',
            cancelText: '取消',
            onConfirm: () => {
                console.log('确定')
            },
            onCancel: () => {
                console.log('取消')
            }
        })
    }

    return <div>
        <Button onClick={handleModal}>打开弹窗</Button>
    </div>
}

export default App;

点击蒙层关闭弹窗 ​

tsx
import { Button, Modal } from 'ono-react-element'

function App() {
    const handleModal = () => {
        Modal({
            title: '弹窗标题',
            content: '弹窗内容',
            okText: '确定',
            cancelText: '取消',
            onConfirm: () => {
                console.log('确定')
            },
            onCancel: () => {
                console.log('取消')
            },
            maskClosable: true
        })
    }

    return <div>
        <Button onClick={handleModal}>打开弹窗</Button>
    </div>
}

export default App;

自定义底部内容 ​

只需要确认键，不需要取消键，可以这样写：

tsx
import { Button, Modal } from 'ono-react-element'

function App() {
    const handleModal = () => {
        Modal({
            footer: ({ OkBtn }) => (
                <>
                    <OkBtn />
                </>
            )
        })
    }

    return <div>
        <Button onClick={handleModal}>打开弹窗</Button>
    </div>
}

export default App;

只需要取消键，不需要确认键，可以这样写：

tsx
import { Button, Modal } from 'ono-react-element'

function App() {
    const handleModal = () => {
        Modal({
            footer: ({ CancelBtn }) => (
                <>
                    <CancelBtn />
                </>
            )
        })
    }

    return <div>
        <Button onClick={handleModal}>打开弹窗</Button>
    </div>
}

export default App;

如果不满意默认的按钮样式，可以这样写：

tsx
import { Button, Modal } from 'ono-react-element'

function App() {
    const handleModal = () => {
        Modal({
            footer: ({ handleClose }) => (
                <>
                    <button
                        onClick={()=>{
                            console.log('取消')
                            handleClose()
                        }}
                    >
                        取消
                    </button>
                    <button
                        onClick={()=>{
                            console.log('确定')
                            handleClose()
                        }}
                    >
                        确定
                    </button>
                </>
            )
        })
    }

    return <div>
        <Button onClick={handleModal}>打开弹窗</Button>
    </div>
}

export default App;

若不需要底部按钮，可以这样写：

tsx
import { Button, Modal } from 'ono-react-element'

function App() {
    const handleModal = () => {
        Modal({ footer: null, maskClosable: true })
    }

    return <div>
        <Button onClick={handleModal}>打开弹窗</Button>
    </div>
}

export default App;

自定义弹窗样式 ​

tsx
import { Button, Modal } from 'ono-react-element'

function App() {
  const handleModal = () => {
    Modal({
      modalBody: handleClose => (
        <div
          style={{
            width: '416px',
            height: '200px',
            backgroundColor: '#f0f2f5',
            padding: '20px',
            borderRadius: '8px'
          }}
        >
          <h1>自定义弹窗标题</h1>
          <p style={{ marginTop: '16px' }}>自定义弹窗内容</p>
          <button
            style={{
              float: 'right',
              padding: '4px 16px',
              backgroundColor: '#5644b8',
              color: '#fff',
              borderRadius: '4px',
              marginTop: '64px'
            }}
            onClick={handleClose}
          >
            关闭弹窗
          </button>
        </div>
      )
    })
  }

  return (
    <div>
      <Button onClick={handleModal}>打开弹窗</Button>
    </div>
  )
}

export default App;

指定弹窗出现和消失位置 ​

tsx
import { Button, Modal } from 'ono-react-element'

function App() {
  const handleModal = (e: React.MouseEvent) => {
    const rect = e.currentTarget.getBoundingClientRect()
    const centerX = rect.left + rect.width / 2
    const centerY = rect.top + rect.height / 2

    Modal({
      title: '弹窗标题',
      content: '弹窗内容',
      okText: '确定',
      cancelText: '取消',
      startPosition: { x: centerX, y: centerY },
      onConfirm: () => {
        console.log('确定')
      },
      onCancel: () => {
        console.log('取消')
      }
    })
  }

  return <Button onClick={handleModal}>打开弹窗</Button>
}

export default App;

使用Promise延时关闭 ​

tsx
import { Button, Modal } from 'ono-react-element'

function App() {
  const handleModal = () => {
    Modal({
      title: '弹窗标题',
      content: '弹窗内容',
      okText: '确定',
      cancelText: '取消',
      onConfirm: () => new Promise(res => setTimeout(res, 3000))
    })
  }

  return <Button onClick={handleModal}>打开弹窗</Button>
}

export default App;

API ​

通用属性参考：通用属性

参数说明类型默认值是否必填
title弹窗标题ReactNodestring否
content弹窗内容ReactNodestring否
icon弹窗图标ReactNodeReactNode否
okText确定按钮文字stringstring否
cancelText取消按钮文字stringstring否
startPosition弹窗出现的起始位置{ x: number, y: number }-否
confirmDisabled确定按钮禁用booleanfalse否
cancelDisabled取消按钮禁用booleanfalse否
onConfirm确定按钮回调() => void | Promise<void>-否
onCancel取消按钮回调() => void | Promise<void>-否
mask是否显示蒙层booleantrue否
maskClosable点击蒙层是否可关闭弹窗booleanfalse否
width弹窗宽度string|number416否
btnClr按钮颜色string#5644b8否
footer自定义底部内容(params: footerRenderParams) => ReactNode|null({ OkBtn, CancelBtn }) => ReactNode否
modalBody自定义弹窗内容(handleClose: () => void) => ReactNodenull否

footerRenderParams ​

参数说明类型默认值是否必填
OkBtn确定按钮组件FC<{}>FC<{}>否
CancelBtn取消按钮组件FC<{}>FC<{}>否
handleClose关闭弹窗回调() => void() => void否

Copyright © 2024-present ONO