评论

学习腾讯QQ的UI设计,实现一个模态框组件

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

前言

本文是笔者分享的第一篇文章,大佬们嘴下留情😆。写这个模态框组件,刚好是看到了腾讯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
"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"
}

  • 最后附上代码片段,不足之处还请各位大佬不吝赐教 😊😊

最后一次编辑于  08-05  
点赞 2
收藏
评论

2 个评论

登录 后发表内容