CustomModal 弹窗

业务通用的弹窗组件，支持内容对齐、不再提醒勾选等功能。

引入

组件位置

/pages/component/customModal/index

在 app.json 或 index.json 中引入组件：

json

"usingComponents": {
  "customModal": "/pages/component/customModal/index"
}

代码演示

基础用法

html

<customModal 
  modalObj="{{ modalObj }}" 
>
</customModal>

javascript

Page({
  data: {
    modalObj: {
      isShow: true,
      title: '温馨提示',
      content: '这是一个基础模态框演示',
      showCancel: true,
      confirmText: '确定',
      cancelText: '取消'
    }
  }
})

API

Props

参数	说明	类型	默认值
modalObj	模态框配置对象	Object	见下方
typeObj	业务类型标识	string	`''`

modalObj 参数说明

参数	说明	类型	默认值
isShow	是否显示	boolean	`false`
title	标题	string	`'提示'`
content	内容	string	`''`
tipText	辅助提示文字	string	`''`
subContent	副标题/时间展示	string	`''`
showCancel	是否显示取消按钮	boolean	`true`
showconfirm	是否显示确定按钮	boolean	`true`
cancelText	取消按钮文字	string	`'取消'`
confirmText	确定按钮文字	string	`'确定'`
isTextJustify	内容是否两端对齐	boolean	`false`
isShowTips	是否显示“不再提醒”勾选框	boolean	`false`
isMaskClick	点击遮罩层是否关闭 (默认关闭)	boolean	`false`
confirmClass	确认按钮自定义类名	string	`'confirm'`
cancelClass	取消按钮自定义类名	string	`'cancel'`
confirmCallback	确定回调函数名 (业务逻辑自定)	string	`''`
cancelCallback	取消回调函数名	string	`''`
closeCallback	遮罩层关闭回调函数名	string	`''`

Events

事件名	说明	回调参数
onChange	弹窗状态改变时触发	`{ isConfirm: boolean, isLongerPrompt?: boolean }` (isLongerPrompt 为 true 表示勾选了不再提醒且点击了取消)
onReset	当 `typeObj` 为 `areator` 且点击取消时触发	-

CustomModal 弹窗 ​

引入 ​

组件位置 ​

代码演示 ​

基础用法 ​

API ​

Props ​

modalObj 参数说明 ​

Events ​

CustomModal 弹窗

引入

组件位置

代码演示

基础用法

API

Props

modalObj 参数说明

Events