快捷導(dǎo)航

uniapp定義new plus.nativeObj.View實現(xiàn)APP端全局彈窗功能

更新時間：2024年11月28日 10:54:58 作者：new出一個對象

文章介紹了在UniApp中使用`newplus.nativeObj.View`實現(xiàn)彈窗的原因和方法,它定義了一個`AppPopupView`彈窗函數(shù),并在`main.js`中掛載到全局頁面,以便在任何地方調(diào)用,感興趣的朋友跟隨小編一起看看吧

為什么要用new plus.nativeObj.View在APP端實現(xiàn)彈窗？因為uni.showModal在APP端太難看了。

AppPopupView彈窗函數(shù)參數(shù)定義

參數(shù)一:彈窗信息(所有屬性可不填，會有默認值)

1.title:"", //標題

2.content:"", //內(nèi)容

3.confirmBoxColor:"", //確認按鈕背景色

4.cancelText:"", //取消按鈕文字

5.confirmText:" //確認按鈕文字"

6.showCancel: false, // 是否顯示取消按鈕是:true(默認) 否:false

7.maskClick: true // 是否允許點擊遮罩層關(guān)閉彈窗是:true 否:false(默認)

參數(shù)二(cd1):點擊確認按鈕執(zhí)行邏輯，

參數(shù)三(cd2):點擊取消按鈕執(zhí)行邏輯。

/utils/AppPopupView.js 定義彈窗文件

export default AppPopupView
function AppPopupView({
	title = '提示',
	content = '',
	confirmBoxColor = '#41a863',
	cancelText = "取消",
	confirmText = "確認",
	showCancel = true,
	maskClick = false,
} = {}, cd1, cd2) {
	let screenWidth = plus.screen.resolutionWidth
	let screenHeight = plus.screen.resolutionHeight
	const popupViewWidth = screenWidth * 0.7
	const popupViewHeight = 80 + 20 + 20 + 90 + 10
	const viewContentPadding = 20
	const viewContentWidth = parseInt(popupViewWidth - (viewContentPadding * 2))
	let maskLayer = new plus.nativeObj.View('maskLayer', {
		top: '0px',
		left: '0px',
		height: '100%',
		width: '100%',
		backgroundColor: 'rgba(0,0,0,0.2)'
	})
	let popupViewContentList = [{
		tag: 'font',
		id: 'title',
		text: title,
		textStyles: {
			size: '18px',
			color: "#333",
			weight: "bold",
			whiteSpace: "normal"
		},
		position: {
			top: '55px',
			left: viewContentPadding + "px",
			width: viewContentWidth + "px",
			height: "30px",
		}
	}]
	popupViewContentList.push({
		tag: 'font',
		id: 'content',
		text: content || '確認要操作嗎?',
		textStyles: {
			size: '14px',
			color: "#666",
			lineSpacing: "50%",
			align: "left"
		},
		position: {
			top: "100px",
			left: viewContentPadding + "px",
			width: viewContentWidth + "px",
			height: "18px",
		}
	});
	if (showCancel === true) { // 添加取消按鈕
		popupViewContentList.push({
			tag: 'rect',
			id: 'cancelBox',
			rectStyles: {
				radius: "3px",
				borderColor: "#f1f1f1",
				borderWidth: "1px",
			},
			position: {
				bottom: viewContentPadding + 'px',
				left: viewContentPadding + "px",
				width: (viewContentWidth - viewContentPadding) / 2 + "px",
				height: "30px",
			}
		})
		popupViewContentList.push({
			tag: 'font',
			id: 'cancelText',
			text: cancelText,
			textStyles: {
				size: '14px',
				color: "#666",
				lineSpacing: "0%",
				whiteSpace: "normal"
			},
			position: {
				bottom: viewContentPadding + 'px',
				left: viewContentPadding + "px",
				width: (viewContentWidth - viewContentPadding) / 2 + "px",
				height: "30px",
			}
		})
	}
	popupViewContentList.push({
		tag: 'rect',
		id: 'confirmBox',
		rectStyles: {
			radius: "3px",
			color: confirmBoxColor,
		},
		position: {
			bottom: viewContentPadding + 'px',
			left: ((viewContentWidth - viewContentPadding) / 2 + viewContentPadding * 2) + "px",
			width: (viewContentWidth - viewContentPadding) / 2 + "px",
			height: "30px",
		}
	})
	popupViewContentList.push({
		tag: 'font',
		id: 'confirmText',
		text: confirmText || '確認',
		textStyles: {
			size: '14px',
			color: "#FFF",
			lineSpacing: "0%",
			whiteSpace: "normal"
		},
		position: {
			bottom: viewContentPadding + 'px',
			left: ((viewContentWidth - viewContentPadding) / 2 + viewContentPadding * 2) + "px",
			width: (viewContentWidth - viewContentPadding) / 2 + "px",
			height: "30px",
		}
	})
	if (showCancel === false) { // 如果只顯示確認按鈕需要重新設(shè)置按鈕的width和left
		for (let i = 0; i < popupViewContentList.length; i++) {
			let item = popupViewContentList[i]
			if (item.id === 'confirmBox' || item.id === 'confirmText') {
				item.position.left = viewContentPadding + "px"
				item.position.width = viewContentWidth + "px"
			}
		}
	}
	let popupView = new plus.nativeObj.View("popupView", { //創(chuàng)建底部圖標菜單
		tag: "rect",
		top: (screenHeight - popupViewHeight) / 2 + "px",
		left: '15%',
		height: popupViewHeight + "px",
		width: "70%"
	})
	popupView.drawRect({
		color: "#FFFFFF",
		radius: "20px"
	}, {
		top: "40px",
		height: popupViewHeight - 40 + "px",
	})
	popupView.addEventListener("click", e => {
		let maxTop = popupViewHeight - viewContentPadding
		let maxLeft = popupViewWidth - viewContentPadding
		let buttonWidth = (viewContentWidth - viewContentPadding) / 2
		if (e.clientY > maxTop - 30 && e.clientY < maxTop) {
			let maxTop = popupViewHeight - viewContentPadding;
			let maxLeft = popupViewWidth - viewContentPadding;
			let buttonWidth = (viewContentWidth - viewContentPadding) / 2;
			if (showCancel) {
				if (e.clientY > maxTop - 30 && e.clientY < maxTop) {
					if (e.clientX > viewContentPadding && e.clientX < maxLeft - buttonWidth -
						viewContentPadding) {
						// console.log("取消"); 
						maskLayer.hide()
						popupView.hide()
						cd2 && cd2()
					}
					if (e.clientX > maxLeft - buttonWidth && e.clientX < maxLeft) {
						// console.log("確認");
						maskLayer.hide()
						popupView.hide()
						cd1 && cd1()
					}
				}
			} else {
				maskLayer.hide()
				popupView.hide()
				cd1 && cd1()
			}
		}
	})
	popupView.draw(popupViewContentList)
	// 點擊遮罩層
	maskLayer.addEventListener("click", function() { //處理遮罩層點擊
		if (maskClick) {
			maskLayer.hide();
			popupView.hide();
		}
	})
	// 顯示彈窗
	maskLayer.show()
	popupView.show()
}

在main.js掛載到全局

// #ifdef APP-PLUS
import AppPopupView from '@/utils/AppPopupView.js';
Vue.prototype.AppPopupView = AppPopupView;
// #endif

頁面調(diào)用全局彈窗

<script>
	export default {
		onLoad() {
			// #ifdef APP-PLUS
			// 參數(shù)一:彈窗信息(所有屬性可不填，會有默認值)
			let AppPopupInfo = {
				// title:"", //標題
				// content:"", //內(nèi)容
				// confirmBoxColor:"", //確認按鈕背景色
				// cancelText:"", //取消按鈕文字
				// confirmText:" //確認按鈕文字",  
				// showCancel: false, // 是否顯示取消按鈕 是:true(默認) 否:false
				// maskClick: true // 是否允許點擊遮罩層關(guān)閉彈窗 是:true 否:false(默認) 
			}
			// 參數(shù)二:點擊確認按鈕執(zhí)行邏輯
			const affirmBtn = () => {
				console.log("點擊了確認按鈕");
			}
			// 參數(shù)三:點擊取消按鈕執(zhí)行邏輯
			const cancelBtn = () => {
				console.log("點擊了取消按鈕");
			}
			this.AppPopupView(AppPopupInfo, affirmBtn, cancelBtn)
			// #endif
		},
	}
</script>

效果圖