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

• 使用 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: '取消', // 取消按钮的文字
      confirmText: '确定', // 确定按钮的文字
      success(res) {
        if (res.confirm) {
          console.log('用户点击了确定');
          // 执行确认后的逻辑
        } else if (res.cancel) {
          console.log('用户点击了取消');
          // 执行取消后的逻辑
        }
      },
    });
  },
},

在上述代码中，showModalExample() 函数调用了 uni.showModal()，并传入了一个配置对象，其中包含了模态框的:

• 标题、
• 内容、
• 按钮文字等属性。

当用户点击确定或取消按钮时，success 回调函数会被触发，可以根据 res.confirm 和 res.cancel 的值判断用户的选择并执行相应操作。

更多详细内容，请微信搜索“前端爱好者“， 戳我 查看 。

使用 uView UI 库的 Modal 组件

如果你的项目中已经集成并使用了 uView UI 库，那么可以利用其提供的 Modal 组件来实现自定义样式的模态框。

首先，添加组件

在模板（.vue 文件的 <template> 部分）中添加 Modal 组件：

<template>
  <view>
    <!-- 其他内容... -->

    <!-- uView Modal 组件 -->
    <u-modal ref="myModal"
             title="提示"
             :content="modalContent"
             @confirm="onModalConfirm"
             @cancel="onModalCancel">
    </u-modal>

    <!-- 触发 Modal 的按钮或其他触发方式 -->
    <button @click="openModal">打开 Modal</button>
  </view>
</template>

接着，控制组件的显示与隐藏

在对应的 <script> 部分编写 JavaScript 函数来控制 Modal 的显示与隐藏，以及处理确认与取消事件：

import { ref } from 'vue';

export default {
  setup() {
    const myModal = ref(null); // 引用 uModal 组件

    const modalContent = '您确定要进行此操作吗？'; // 模态框内容

    function openModal() {
      // 调用 uModal 组件的 show 方法显示模态框
      myModal.value.show();
    }

    function onModalConfirm() {
      console.log('用户点击了确定');
      // 执行确认后的逻辑
      // 关闭模态框（如果不需要自动关闭，可以省略这一行）
      myModal.value.close();
    }

    function onModalCancel() {
      console.log('用户点击了取消');
      // 执行取消后的逻辑
      // 关闭模态框（如果不需要自动关闭，可以省略这一行）
      myModal.value.close();
    }

    return {
      myModal,
      modalContent,
      openModal,
      onModalConfirm,
      onModalCancel,
    };
  },
};

在这个示例中，openModal() 函数被绑定到按钮的点击事件上，当点击按钮时，它会调用 myModal.value.show() 来显示 Modal。

onModalConfirm 和 onModalCancel 分别对应 Modal 组件的 @confirm 和 @cancel 事件，当用户在 Modal 中点击确认或取消按钮时，这些函数会被触发并执行相应逻辑。

两种方式如何选择

选择哪种方式取决于你的项目需求和已使用的库。

• 如果只需要基础功能和原生样式，直接使用 uni.showModal() 即可；
• 如果希望实现更丰富的自定义样式和功能，推荐使用 uView 或其他 UI 库提供的 Modal 组件。
  • 记得确保已经正确安装和引入相关库。