# 前言

本文是笔者分享的第一篇文章，大佬们嘴下留情😆。写这个模态框组件，刚好是看到了腾讯QQ的一些UI设计挺舒服的，以后也会分享如何实现一个一样的页面设计。

# 1.1 腾讯QQ的模态框

# 1.2 我实现的模态框

# 2.1 参数说明

属性	类型	默认值	说明
isShow	Boolean	false	是否显示模态框
mask	Boolean	true	是否显示遮罩
title	String	温馨提示	模态框的标题
content	String		模态框的内容
showCancel	Boolean	true	是否显示取消按钮
cancelText	String	取消	取消按钮的文字，最多 6 个字符
cancelColor	String	#232323	取消按钮的文字颜色，必须是 16 进制格式的颜色字符串
confirmText	String	确定	确认按钮的文字，最多 6 个字符
confirmColor	String	#232323	确认按钮的文字颜色，必须是 16 进制格式的颜色字符串

# 2.2 事件回调

Object res.detail

// page.wxml
<custom-modal bind:action="showModal" />
// page.js
showModal (res) {
    if (res.detail.confirm) {
      // doing something after click confirm
    } else if (res.detail.cancel) {
      // doing something after click cancel
    }
}
// res.detail
{
	cancel: Boolean,
	confirm: Boolean,
	errMsg: "showModal:ok"
}

最后附上代码片段 (opens new window)，不足之处还请各位大佬不吝赐教 😊😊