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

最新推荐文章于 2025-03-18 21:46:22 发布

前端布道人

最新推荐文章于 2025-03-18 21:46:22 发布

阅读量2.2k

点赞数 15

分类专栏：前端面试题前端杂货铺文章标签： uni-app

本文链接：https://blog.csdn.net/BradenHan/article/details/137842974

版权

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用 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: '取消'