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 - -