qrcode
扫描二维码查看 H5 演示效果
qrcode
扫描二维码查看演示效果
taro-ui, 非 taro-ui-vue3
wxapp

Modal 模态框

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

使用指南

在 Taro 文件中引入组件

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

由于微信小程序的限制，在 Modal 组件中使用一些客户端创建的原生组件（如：textarea、input等）时，即使 Modal 组件处于隐藏状态，原生组件依然会在页面上显示，具体参见微信小程序文档：原生组件。

组件依赖的样式文件（仅按需引用时需要）

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

一般用法

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

简化使用

<AtModal
  isOpened
  title='标题'
  cancelText='取消'
  confirmText='确认'
  @close="handleClose"
  @cancel="handleCancel"
  @confirm="handleConfirm"
  content='欢迎加入京东凹凸实验室\n\r欢迎加入京东凹凸实验室'
/>

AtModal 参数

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

AtModal 事件

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