uni-app 如何在函数中调用 Modal 模态框

最新推荐文章于 2025-05-15 22:32:10 发布

原创

最新推荐文章于 2025-05-15 22:32:10 发布 · 2.6k 阅读

19 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app

本文介绍了在uni-app中使用uni.showModal内置API和uViewUI库实现模态框的方法，包括基本配置、事件处理及两种方式的适用场景对比。

使用 uni-app API uni.showModal
使用 uView UI 库的 Modal 组件
- 首先，添加组件
- 接着，控制组件的显示与隐藏
两种方式如何选择

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

在 uni-app 中，如果你想在 JavaScript 函数中调用一个 Modal 模态框，通常有两种方式：

使用 uni-app 提供的 API uni.showModal() ;
使用第三方 UI 库（如 uView）提供的 Modal 组件。

以下是这两种方法的具体示例：

使用 uni-app API `uni.showModal()`

uni-app 提供了内置的 API uni.showModal() 用于直接弹出系统样式的模态框。

在函数中调用这个 API 如下：

methods: {
   
   
  showModalExample() {
   
   
    // 调用 uni-app 的 showModal 方法
    uni.showModal({
   
   
      title: '提示', // 模态框标题
      content: '您确定要进行此操作吗？', // 模态框内容
      showCancel: true, // 是否显示取消按钮，默认为true
      cancelText: '取消',