uni-app 弹出提示框

青旅半醒 2021-11-17 08:44 596阅读 0赞

### [uni.showModal(OBJECT)][uni.showModal_OBJECT] ###

显示模态弹窗，类似于标准 html 的消息框：alert、confirm。

**OBJECT参数说明**

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>类型</th> 
   <th>必填</th> 
   <th>说明</th> 
   <th>平台差异说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>title</td> 
   <td>String</td> 
   <td>是</td> 
   <td>提示的标题</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>content</td> 
   <td>String</td> 
   <td>是</td> 
   <td>提示的内容</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>showCancel</td> 
   <td>Boolean</td> 
   <td>否</td> 
   <td>是否显示取消按钮，默认为 true</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>cancelText</td> 
   <td>String</td> 
   <td>否</td> 
   <td>取消按钮的文字，默认为"取消"，最多 4 个字符</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>cancelColor</td> 
   <td>HexColor</td> 
   <td>否</td> 
   <td>取消按钮的文字颜色，默认为"#000000"</td> 
   <td>H5、微信小程序、百度小程序</td> 
  </tr> 
  <tr> 
   <td>confirmText</td> 
   <td>String</td> 
   <td>否</td> 
   <td>确定按钮的文字，默认为"确定"，最多 4 个字符</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>confirmColor</td> 
   <td>HexColor</td> 
   <td>否</td> 
   <td>确定按钮的文字颜色，H5平台默认为"#007aff"，微信小程序平台默认为"#3CC51F"，百度小程序平台默认为"#3c76ff"</td> 
   <td>H5、微信小程序、百度小程序</td> 
  </tr> 
  <tr> 
   <td>success</td> 
   <td>Function</td> 
   <td>否</td> 
   <td>接口调用成功的回调函数</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>fail</td> 
   <td>Function</td> 
   <td>否</td> 
   <td>接口调用失败的回调函数</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>complete</td> 
   <td>Function</td> 
   <td>否</td> 
   <td>接口调用结束的回调函数（调用成功、失败都会执行）</td> 
   <td>&nbsp;</td> 
  </tr> 
 </tbody> 
</table>

**success返回参数说明**

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>类型</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>confirm</td> 
   <td>Boolean</td> 
   <td>为 true 时，表示用户点击了确定按钮</td> 
  </tr> 
  <tr> 
   <td>cancel</td> 
   <td>Boolean</td> 
   <td>为 true 时，表示用户点击了取消（用于 Android 系统区分点击蒙层关闭还是点击取消按钮关闭）</td> 
  </tr> 
 </tbody> 
</table>

**Tips：**

*  在 App 下可以使用 [原生增强提示框插件][Link 1] 来解决 App 无法设置 cancelColor、confirmColor的问题。

**示例**

uni.showModal({
        title: '提示',
        content: '这是一个模态弹窗',
        success: function (res) {
            if (res.confirm) {
                console.log('用户点击确定');
            } else if (res.cancel) {
                console.log('用户点击取消');
            }
        }
    });

[uni.showModal_OBJECT]: https://uniapp.dcloud.io/api/ui/prompt?id=showmodal
[Link 1]: https://ext.dcloud.net.cn/plugin?id=36