# ayy-modal

**Repository Path**: osaiyoyou/ayy-modal

## Basic Information

- **Project Name**: ayy-modal
- **Description**: uniapp 全局弹窗
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 4
- **Forks**: 2
- **Created**: 2024-08-28
- **Last Updated**: 2025-10-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 全局弹窗组件(支持vue2和vue3)
#### 不依赖任何其他第三方库（集成门槛低）

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

#### 详细集成文档也可参考[源地址](https://gitee.com/osaiyoyou/ayy-modal)

- 插件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' //样式配置表配置需要放在最前面配置才会生效
//ayyModal.config.footerTemple = 'temp1' //全局配置底部操作按钮模板,默认为‘default’模板
// #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
{
	// #ifdef VUE2
	"path": "ayy-modal/components/ayy-modal/ayy-modal",
	// #endif
	// #ifdef VUE3
	"path": "node_modules/ayy-modal/components/ayy-modal/ayy-modal",
	// #endif
    "style": {
		"navigationStyle": "custom",
		"backgroundColor": "transparent",
		"disableSwipeBack": true,
		"app-plus": {
			"animationType": "fade-in",
			"background": "transparent",
			"popGesture": "none",
			"bounce": "none"
		}
	}
},
// #endif
```
- 如果需要支持小程序，那么需要添加如下配置（验证了支付宝小程序无法使用vue-inset-loader动态添加标签，所有支付宝若要使用可手动在需要弹窗的页面添加<ayy-modal></ayy-modal>标签。其他小程序暂时未测试）
```
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
// 所有页面注入<ayy-modal>组件
// #ifdef MP
"insetLoader": {
    "config":{
        "ayyModal": "<ayy-modal></ayy-modal>"
    },
    // 全局配置
    "label":["ayyModal"],
    "rootEle":"view"
},
// #endif

```

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

//手动再引入一次<ayy-modal>标签，标签标记一下ref值（不同switchTab页面标记不同ref值，以做区分），例如：
//第一个switchTab页面
<ayy-modal ref="indexRef"></ayy-modal>
onShow() {
    uni.$ayyModal.initInstance(this.$refs.indexRef)
}
//第二个switchTab页面
<ayy-modal ref="index2Ref"></ayy-modal>
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: "<span style='color:red;'>我们都是中国人我们都是中国人我们都是中国人我们都是中国人</span>",
	contentMode: 'rich-text',
})

uni.$ayyModal.show({
	title: "温馨提示",
	content: "使用单行输入",
	editable: true,
	confirmFun: (data) => {
		console.log(`inputText=>`+data.inputText)
		//APP端confirmFun回调中若有页面跳转需要延迟一点点再跳转
		setTimeout(() => {
			uni.navigateTo({
				url: '/pages/index/detail'
			})
		}, 10)
	}
})

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: '/pages/index/detail'
		})
	}
})
```

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