uniapp-vue2引用ayy-modal全局弹窗组件

对象是new出来的

679人浏览 · 2024-11-26 19:05:29

对象是new出来的 · 2024-11-26 19:05:29 发布

目前功能最全的平台全局弹窗组件

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

git官网地址：ayy-modal: uniapp 全局弹窗

DCloud插件地址：uniapp 全局弹窗 - DCloud 插件市场

有一个小问题：在App端每次打开关闭窗口会触发当前页面的onShow和onHide生命周期，需要处理该问题请参考：uniapp在App端定义全局弹窗，当打开关闭弹窗会触发onShow、onHide生命周期怎么解决？-CSDN博客

下载弹窗插件，然后删除git

git clone https://gitee.com/osaiyoyou/ayy-modal.git

把下载的ayy-modal插件放在uni_modules目录下

组件全局引入（main.js）

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

pages.json 组件easycom全局引入

	"easycom": {
		"ayy-modal": "@/uni_modules/ayy-modal/components/ayy-modal/ayy-modal.vue"
	}

设置弹窗默认标题，如果没有传title就默认。

	// 设置标题
	if(options.hasOwnProperty('title')){
		options.title = options.title 
	}else {
		options.title =  "提示"
	}

如果支持APP端，那么需要添加如下配置

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

// #ifdef APP-PLUS
, {
    "path" : "uni_modules/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

2、需要重新设置弹窗的路径，否则在APP弹窗无效

		uni.navigateTo({
			url: '/uni_modules/ayy-modal/components/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

	// #ifdef MP
	,
	"insetLoader": {
		"config": {
			"ayyModal": "<ayy-modal></ayy-modal>"
		},
		// 全局配置
		"label": ["ayyModal"],
		"rootEle": "view"
	}
	// #endif

编译小程序报错

编译小程序如果遇到vue和vue-template-compiler版本不一样报错，请参考解决方案：https://blog.csdn.net/weixin_52830464/article/details/144062731

使用示例

uni.$ayyModal.show({
	title: "我是标题",
    content: "我是内容",
    showCancel:false,
    confirmFun: () => {		
			
    }
})

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: "<span style='color:red;'>我们都是中国人我们都是中国人我们都是中国人我们都是中国人</span>",
	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("delete2,delete1")
//修改弹窗内容（以标题为例）
vm.title = '12123123123'
uni.$ayyModal.update(vm)

效果图