Modal 模态框


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

使用指南

在 Taro 文件中引入组件

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

由于微信小程序的限制,在 Modal 组件中使用一些客户端创建的原生组件(如:textareainput等)时,即使 Modal 组件处于隐藏状态,原生组件依然会在页面上显示,具体参见微信小程序文档:原生组件

组件依赖的样式文件(仅按需引用时需要)

  1. @import "~taro-ui/dist/style/components/modal.scss";

一般用法

  1. <AtModal isOpened>
    <AtModalHeader>标题</AtModalHeader>
    <AtModalContent>
    这里是正文内容,欢迎加入京东凹凸实验室
    这里是正文内容,欢迎加入京东凹凸实验室
    这里是正文内容,欢迎加入京东凹凸实验室
    </AtModalContent>
    <AtModalAction> <Button>取消</Button> <Button>确定</Button> </AtModalAction>
    </AtModal>

简化使用

  1. <AtModal
    isOpened
    title='标题'
    cancelText='取消'
    confirmText='确认'
    onClose={ this.handleClose }
    onCancel={ this.handleCancel }
    onConfirm={ this.handleConfirm }
    content='欢迎加入京东凹凸实验室\n\r欢迎加入京东凹凸实验室'
    />

AtModal 参数

参数说明类型可选值默认值
title元素的标题String--
content元素的内容String--
cancelText取消按钮的文本String--
closeOnClickOverlay点击浮层的时候时候自动关闭Boolean-true
confirmText确认按钮的文本String--
isOpened是否显示模态框String-false

AtModal 事件

事件名称说明返回参数
onClose触发关闭时的事件-
onCancel点击取消按钮触发的事件-
onConfirm点击确认按钮触发的事件-

Modal模态框 - 图1