• Modal 模态框
    • 使用指南
    • 一般用法
    • 简化使用
    • AtModal 参数

    Modal 模态框


    提供一个简单的 Modal 框,也可以作为 Dialog (对话框) 之类的组件使用,在页面上的层级为 1000

    使用指南

    在 Taro 文件中引入组件

    :::demo

    1. import { AtModal, AtModalHeader, AtModalContent, AtModalAction } from 'taro-ui'

    :::

    一般用法

    :::demo

    1. <AtModal isOpened>
    2. <AtModalHeader>标题</AtModalHeader>
    3. <AtModalContent>
    4. 这里是正文内容,欢迎加入京东凹凸实验室
    5. 这里是正文内容,欢迎加入京东凹凸实验室
    6. 这里是正文内容,欢迎加入京东凹凸实验室
    7. </AtModalContent>
    8. <AtModalAction>
    9. <Button>取消</Button>
    10. <Button>确定</Button>
    11. </AtModalAction>
    12. </AtModal>

    :::

    简化使用

    :::demo

    1. <AtModal
    2. isOpened
    3. title='标题'
    4. cancleText='取消'
    5. confirmText='确认'
    6. onCancle={ this.handleCancle }
    7. onConfirm={ this.handleConfirm }
    8. content='欢迎加入京东凹凸实验室\n\r欢迎加入京东凹凸实验室'
    9. />

    :::

    AtModal 参数

    参数 说明 类型 可选值 默认值
    title 元素的标题 String - -
    content 元素的内容 String - -
    cancleText 取消按钮的文本 String - -
    confirmText 确认按钮的文本 String - -
    onCancle 点击取消按钮触发的样式 Function - -
    onConfirm 点击确认按钮触发的事件 Function - -