更新记录

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)

全局弹窗组件内部使用了vue2版本使用了uview2.0，所以使用前请自行集成uview2.0；vue3版本可将uview2.0替换成‘uview-plus 3.x.xx’版本可无缝兼容

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

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

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

  
  //vue2版本
  "dependencies": {
    "ayy-modal": "git+https://gitee.com/osaiyoyou/ayy-modal.git#master",
    "uview-ui": "^2.0.37"
  }
  
  //vue3版本
  "dependencies": {
    "ayy-modal": "git+https://gitee.com/osaiyoyou/ayy-modal.git#master",
    "uview-plus": "^3.3.36"
  }

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

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

• pages.json 组件easycom全局引入

  "easycom": {
  "autoscan": true,
  "custom": {
      "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue",
      "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

• 如果需要支持小程序，那么需要添加如下配置

  
  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

- 使用示例

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({ title: "使用富文本", content: "我们都是中国人我们都是中国人我们都是中国人我们都是中国人", contentMode: 'rich-text', })

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

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

- 弹窗操作API

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