更新记录

1.0.7（2025-01-04） 下载此版本

1、移除uveiw依赖，不依赖第三方组件，集成零门槛 2、修复微信小程序端若干bug

1.0.3（2024-11-03） 下载此版本

1、支持vue3（vue3版本 uview需要使用“uview-plus 3.x.xx”版本）

注意：插件集成请参考 https://gitee.com/osaiyoyou/ayy-modal/blob/master/README.md

1.0.1（2024-08-29） 下载此版本

全局弹窗组件内部使用了uview2.0；所以使用前请自行集成uview2.0

支持市面上不支持的，确很想支持的功能。

1. 支持h5 | app | 小程序平台
2. 支持弹窗缓存池，再多弹窗没处理也不怕，同一时间只显示一个弹框，按先进后出顺序处理弹窗业务
3. 缓存池支持弹窗去重，定义相同弹窗key，再多的接口401错误也只弹一个重新登录窗体。
4. 支持单行输入及多行输入
5. 标题，内容，按钮支持完全样式修改
6. 内容支持富文本渲染
7. 支持异步业务操作
8. 支持静默删除弹窗（选择性删除及全量删除）
9. 支持动态更新弹窗数据

平台兼容性

全局弹窗组件(支持vue2和vue3)

不依赖任何其他第三方库（集成门槛低）

支持市面上不支持的，确很想支持的功能。

1. 支持h5 | app | 小程序平台
2. 支持弹窗缓存池，再多弹窗没处理也不怕，同一时间只显示一个弹框，按先进后出顺序处理弹窗业务
3. 缓存池支持弹窗去重，定义相同弹窗key，再多的接口401错误也只弹一个重新登录窗体。
4. 支持单行输入及多行输入
5. 标题，内容，按钮支持完全样式修改
6. 内容支持富文本渲染
7. 支持异步业务操作
8. 支持静默删除弹窗（选择性删除及全量删除）
9. 支持动态更新弹窗数据

详细集成文档也可参考源地址

• 插件npm依赖 (package.json中添加依赖)

  复制代码"dependencies": {
    "ayy-modal": "git+https://gitee.com/osaiyoyou/ayy-modal.git#master"
  }

• 插件npm安装与更新

  复制代码首次安装：npm i
  后续更新：npm i ayy-modal

• 组件全局引入（main.js）

  复制代码// #ifdef APP || H5 || MP
  import ayyModal from '@/node_modules/ayy-modal/components/ayy-modal/ayy-modal.js'
  //ayyModal.config.confirmColor = '#00B4BF' //样式配置表配置需要放在最前面配置才会生效
  // #endif

• pages.json 组件easycom全局引入

  复制代码"easycom": {
  "autoscan": true,
  "custom": {
      "ayy-modal": "ayy-modal/components/ayy-modal/ayy-modal.vue"
  }
  }

• pages.json 注册页面路由（App端才需要，注意pages.json对json有严格校验，最后一个节点不允许有"," 所以以下代码{}前后是否需要加逗号看你将下面代码加在那个位置）

  复制代码// #ifdef APP
  {
  "path" : "ayy-modal/components/ayy-modal/ayy-modal",
  "style": {
      "navigationStyle": "custom",
      "backgroundColor": "transparent",
      "disableSwipeBack": true,
      "app-plus": {
          "animationType": "fade-in",
          "background": "transparent",
          "popGesture": "none",
          "bounce": "none"
      }
  }
  },
  // #endif

• 如果需要支持小程序，那么需要添加如下配置（验证了支付宝小程序无法使用vue-inset-loader动态添加标签，所有支付宝若要使用可手动在需要弹窗的页面添加标签。其他小程序暂时未测试）

  复制代码
  1、安装 vue-inset-loader，该插件主要是在每个页面将组件标签<ayy-modal></ayy-modal>写入
  npm install vue-inset-loader --save-dev

2、配置vue.config.js const path = require('path') module.exports = { configureWebpack: { module: { rules: [{ test: /.vue$/, use: { // loader: "vue-inset-loader" //针对Hbuilder工具创建的uni-app项目 loader: path.resolve(__dirname,"./node_modules/vue-inset-loader") } }] } } }

3、pages.json配置文件中添加insetLoader // 所有页面注入组件 // #ifdef MP "insetLoader": { "config":{ "ayyModal": "" }, // 全局配置 "label":["ayyModal"], "rootEle":"view" }, // #endif

复制代码
- 特别注意，只有小程序端才需要以下处理。小程序端理论来讲弹窗不是全局的，是在每个页面都动态的写入了`<ayy-modal>`，所以在做弹窗时确保弹窗容器实例是当前页面的ayy-modal实例才可以,实例切换大部分情况都内部都已经处理好了，无需关心，switchTab页面需要做特殊处理

//switchTab页面使用全局弹窗需要做如下处理

//手动再引入一次标签，标签标记一下ref值（不同switchTab页面标记不同ref值，以做区分），例如： //第一个switchTab页面

onShow() { uni.$ayyModal.initInstance(this.$refs.indexRef) } //第二个switchTab页面

onShow() { uni.$ayyModal.initInstance(this.$refs.index2Ref) }

复制代码
- 使用示例（小程序端调用需确保页面挂载完成后再调用）

uni.$ayyModal.show({ title: "我是标题", content: "我是内容" }) uni.$ayyModal.show({ key: "LoginKey", title: "我是标题", content: "指定唯一标识key，相同key只渲染最后一个key弹窗" }) uni.$ayyModal.show({ key: "LoginKey", title: "我是标题2", content: "指定唯一标识key，相同key只渲染最后一个key弹窗" })

uni.$ayyModal.show({ key:"delete", title: "我是标题", content: "隐藏取消按钮", showCancel: false, })

uni.$ayyModal.show({ key:"delete1", title: "使用富文本", content: "我们都是中国人我们都是中国人我们都是中国人我们都是中国人", contentMode: 'rich-text', })

uni.$ayyModal.show({ title: "温馨提示", content: "使用单行输入", editable: true, confirmFun: (data) => { console.log(inputText=>+data.inputText) } })

let vm = uni.$ayyModal.show({ title: "温馨提示", content: "使用多行输入", editable: true, inputMode: 'textarea', placeholderText: '请输入补充内容', confirmFun: (data) => { console.log(inputText=>+data.inputText) } })

uni.$ayyModal.show({ key: "sleep-pop", title: "异步关闭弹窗", content: "(已支持部分智能设备同步、手动填写)", contentStyle: "color:#828282;font-size: 32rpx;line-height: 48rpx;", asyncClose: true,//异步关闭窗口，需要自己调用remove接口关闭窗口（有页面跳转的需要先关闭弹窗再做页面跳转） confirmFun: (data) => { uni.$ayyModal.remove('sleep-pop') uni.navigateTo({ url: '/clockIn/pages/sleepData' }) } })

复制代码
- 弹窗操作API

//删除单个弹窗 uni.$ayyModal.remove('delete') //删除全部弹窗 uni.$ayyModal.removeAll() //删除全部弹窗，排除的key不删除 uni.$ayyModal.removeAll("delete,delete1") //修改弹窗内容（以标题为例） vm.title = '12123123123' uni.$ayyModal.update(vm)

复制代码