vue3 uniapp showmodal如何实现弹窗功能

在Vue3+uniapp开发中，如何正确使用showModal方法实现弹窗功能？我按照官方文档尝试调用uni.showModal，但弹窗样式和交互效果不符合预期，比如按钮排列异常或回调不触发。请问具体代码该怎么写？是否需要额外配置参数或引入组件？有没有完整的示例可以参考？

2 回复

在Vue3+uni-app中，使用uni.showModal实现弹窗：

uni.showModal({
  title: '提示',
  content: '确认删除吗？',
  success: (res) => {
    if (res.confirm) {
      console.log('用户点击确定')
    } else if (res.cancel) {
      console.log('用户点击取消')
    }
  }
})

也可用<uni-popup>组件实现更复杂的弹窗。


在 Vue3 + UniApp 中，可以使用 uni.showModal 实现弹窗功能，这是 UniApp 提供的官方 API，用于显示模态对话框。

基本用法

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

完整参数配置示例

uni.showModal({
  title: '操作确认',
  content: '确定要删除这个项目吗？',
  confirmText: '删除',
  cancelText: '再想想',
  confirmColor: '#FF0000',
  cancelColor: '#999999',
  success: (res) => {
    if (res.confirm) {
      // 用户点击确定按钮
      this.deleteItem()
    } else if (res.cancel) {
      // 用户点击取消按钮
      console.log('取消删除')
    }
  },
  fail: (err) => {
    console.error('弹窗显示失败:', err)
  }
})

在 Vue3 Composition API 中使用

<template>
  <view>
    <button @click="showConfirmModal">显示确认弹窗</button>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const showConfirmModal = () => {
  uni.showModal({
    title: '确认操作',
    content: '您确定要执行此操作吗？',
    success: (res) => {
      if (res.confirm) {
        handleConfirm()
      }
    }
  })
}

const handleConfirm = () => {
  // 处理确认后的逻辑
  console.log('执行确认操作')
}
</script>

参数说明

  • title: 弹窗标题
  • content: 弹窗内容
  • confirmText: 确认按钮文字（默认"确定"）
  • cancelText: 取消按钮文字（默认"取消"）
  • confirmColor: 确认按钮文字颜色
  • cancelColor: 取消按钮文字颜色
  • success: 接口调用成功的回调函数
  • fail: 接口调用失败的回调函数

注意事项

  1. 在 success 回调中通过 res.confirm 和 res.cancel 判断用户操作
  2. 该方法在 H5、微信小程序、App 等平台均可使用
  3. 如果需要更复杂的弹窗，可以考虑使用第三方 UI 库或自定义组件

这种方式简单易用，适合大多数确认对话框场景。

回到顶部