更新记录

1.0.0（2025-08-27） 下载此版本

• 首次发布wm-model全局弹窗插件
• 支持通过this.$showModal()方法全局调用弹窗
• 提供美观的UI设计和流畅的过渡动画效果
• 基于Promise的API设计，支持异步操作
• 支持自定义标题和内容
• 兼容H5、小程序、App等多端平台
• 确保弹窗显示在原生组件之上

平台兼容性

云端兼容性

uni-app(4.07)

wm-model 全局弹窗插件

一个简单易用的uni-app全局弹窗插件，支持在任何页面通过this.$showModal()方法调用。

注意：当前版本仅支持 Vue 3.x，不支持 Vue 2.x。

依赖说明：此组件是完全独立的，不依赖于 uni-transition 或 uni-scss 等其他插件。

特性

• 🚀 简单易用，一行代码调用
• 🎨 美观的UI设计和流畅的动画效果
• 📱 支持多端运行（H5、小程序、App）
• 🔧 可自定义标题和内容
• ⚡ 基于Promise的API设计
• 🎯 显示在原生组件之上

安装

方式一：插件市场安装

1. 在HBuilderX中打开项目
2. 点击工具栏的"插件市场"
3. 搜索"wm-model"
4. 点击"导入插件"

方式二：手动安装

1. 将uni_modules/wm-model文件夹复制到你的项目根目录下的uni_modules文件夹中
2. 重新编译项目

使用方法

1. 在main.js中注册插件

import { createSSRApp } from 'vue'
import App from './App.vue'
import WmModelManager from '@/uni_modules/wm-model/js_sdk/index.js'

export function createApp() {
  const app = createSSRApp(App)

  // 注册全局弹窗插件
  app.use(WmModelManager)

  return {
    app
  }
}

2. 在页面中使用

选项式 API 用法

// 基本用法
this.$showModal({
  title: '提示',
  content: '这是一个全局弹窗'
}).then(result => {
  if (result) {
    console.log('用户点击了确定')
  } else {
    console.log('用户点击了取消')
  }
})

Composition API (setup) 用法

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

// 获取组件实例以访问全局属性
const instance = getCurrentInstance()

// 使用方法
function showMyModal() {
  instance.proxy.$showModal({
    title: '提示',
    content: '这是一个全局弹窗'
  }).then(result => {
    if (result) {
      console.log('用户点击了确定')
    } else {
      console.log('用户点击了取消')
    }
  })
}
</script>

// 简化用法（只传内容）
this.$showModal({
  content: '操作成功！'
})

// 自定义标题
this.$showModal({
  title: '警告',
  content: '确定要删除这条记录吗？'
}).then(result => {
  if (result) {
    // 执行删除操作
  }
})

// 自定义按钮颜色
this.$showModal({
  title: '成功',
  content: '操作已完成！',
  confirmBtnBgColor: '#28a745',
  confirmBtnTextColor: 'white',
  cancelBtnBgColor: '#dc3545',
  cancelBtnTextColor: 'white'
})

// 只显示一个按钮
this.$showModal({
  title: '提示',
  content: '这是一个通知消息',
  showCancelBtn: false,
  confirmText: '知道了',
  confirmBtnBgColor: '#17a2b8'
})

// 交换按钮位置
this.$showModal({
  title: '确认',
  content: '是否继续操作？',
  reverseBtnOrder: true,
  confirmBtnBgColor: '#fd7e14',
  cancelText: '不了',
  confirmText: '继续'
})

// 标题居中显示
this.$showModal({
  title: '重要通知',
  content: '系统将在5分钟后进行维护',
  titleCenter: true,
  showCancelBtn: false,
  confirmText: '我知道了',
  confirmBtnBgColor: '#6f42c1'
})

// 显示HTML内容
this.$showModal({
  title: '操作成功',
  content: `
    <div style="text-align: center;">
      <div style="color: #28a745; font-size: 18px; margin-bottom: 10px;">✓ 订单创建成功</div>
      <div style="color: #666; font-size: 14px;">订单号：<strong>202401250001</strong></div>
      <div style="color: #666; font-size: 14px;">预计3-5个工作日发货</div>
    </div>
  `,
  isHtml: true,
  showCancelBtn: false,
  confirmText: '确定'
})

// 显示带图标的HTML内容
this.$showModal({
  title: '警告',
  content: `
    <div style="display: flex; align-items: center;">
      <div style="color: #dc3545; font-size: 24px; margin-right: 10px;">⚠️</div>
      <div>
        <div style="color: #dc3545; font-weight: bold;">此操作不可撤销</div>
        <div style="color: #666; font-size: 14px; margin-top: 5px;">删除后数据将无法恢复</div>
      </div>
    </div>
  `,
  isHtml: true,
  confirmBtnBgColor: '#dc3545',
  confirmText: '确认删除'
})

API参考

$showModal(options)

显示全局弹窗

参数：

返回值：

返回一个Promise对象：

• resolve(true) - 用户点击确定按钮
• resolve(false) - 用户点击取消按钮或关闭弹窗

样式自定义

如果需要自定义样式，可以在全局样式中覆盖以下CSS类：

/* 弹窗遮罩层 */
.wm-modal-overlay {
  background-color: rgba(0, 0, 0, 0.5);
}

/* 弹窗容器 */
.wm-modal-container {
  background-color: #fff;
  border-radius: 12px;
}

/* 弹窗标题 */
.wm-modal-title {
  color: #333;
  font-size: 18px;
}

/* 弹窗内容 */
.wm-modal-content {
  color: #666;
  font-size: 16px;
}

/* 确定按钮 */
.wm-modal-confirm {
  background-color: #007aff;
  color: #fff;
}

/* 取消按钮 */
.wm-modal-cancel {
  background-color: #f5f5f5;
  color: #333;
}

兼容性

Vue 版本

• ✅ Vue 3.x
• ❌ Vue 2.x（当前版本不支持）

平台

• ✅ H5

更新日志

v1.0.0 (2025-08-27)

• 🎉 首次发布
• ✨ 支持全局调用弹窗
• ✨ 美观的UI设计和动画效果
• ✨ 基于Promise的API设计

许可证

MIT License

问题反馈

如果在使用过程中遇到问题，请通过以下方式反馈：

1. 在插件市场评论区留言
2. 发送邮件至：1329205336@qq.com

支持作者

如果这个插件对你有帮助，请在插件市场给个好评⭐️