uniapp 确认框如何实现 (根据示例规律，补充了询问/教程类动词结构，使其更符合技术论坛提问风格)

在uniapp中如何实现确认框功能？官方文档中提到的uni.showModal方法使用时需要注意哪些参数配置？比如我想自定义标题、按钮文字和回调函数，具体应该怎么写代码示例？另外这种方式和传统web开发的confirm有什么区别？

2 回复

在uni-app中，使用uni.showModal实现确认框：

uni.showModal({
  title: '提示',
  content: '确认执行此操作？',
  success: function (res) {
    if (res.confirm) {
      console.log('用户点击确定');
    } else if (res.cancel) {
      console.log('用户点击取消');
    }
  }
});

支持自定义标题、内容和按钮文字。


在 UniApp 中，可以通过以下方式实现确认框：

1. 使用 uni.showModal（推荐）

这是最常用的方法，支持自定义标题、内容和按钮文字。

uni.showModal({
  title: '提示',
  content: '确定要执行此操作吗？',
  confirmText: '确定',
  cancelText: '取消',
  success: function (res) {
    if (res.confirm) {
      console.log('用户点击确定');
      // 确定按钮的回调逻辑
    } else if (res.cancel) {
      console.log('用户点击取消');
      // 取消按钮的回调逻辑
    }
  }
});

2. 使用 uni.showActionSheet

适用于多个选项的场景：

uni.showActionSheet({
  itemList: ['选项一', '选项二', '删除'],
  success: function (res) {
    console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
    // 根据 tapIndex 执行相应操作
  },
  fail: function (res) {
    console.log(res.errMsg);
  }
});

3. 自定义弹窗组件

如果需要更复杂的样式，可以创建自定义组件：

<template>
  <view class="custom-modal" v-if="show">
    <view class="modal-mask"></view>
    <view class="modal-content">
      <text class="modal-title">{{title}}</text>
      <text class="modal-message">{{content}}</text>
      <view class="modal-buttons">
        <button @click="handleCancel">取消</button>
        <button @click="handleConfirm">确定</button>
      </view>
    </view>
  </view>
</template>

使用技巧

  • 异步处理：showModal 返回 Promise，可以使用 async/await
  • 样式定制：通过 CSS 自定义弹窗样式
  • 全局封装：将确认框封装成公共方法便于复用

选择哪种方式取决于具体需求，uni.showModal 能满足大部分确认框场景。

回到顶部