uniapp定义new plus.nativeObj.View实现APP端全局弹窗功能
作者：new出一个对象
文章介绍了在UniApp中使用`newplus.nativeObj.View`实现弹窗的原因和方法,它定义了一个`AppPopupView`弹窗函数,并在`main.js`中挂载到全局页面,以便在任何地方调用,感兴趣的朋友跟随小编一起看看吧
为什么要用new plus.nativeObj.View在APP端实现弹窗？因为uni.showModal在APP端太难看了。
AppPopupView弹窗函数参数定义
参数一:弹窗信息(所有属性可不填，会有默认值)
1.title:"", //标题
2.content:"", //内容
3.confirmBoxColor:"", //确认按钮背景色
4.cancelText:"", //取消按钮文字
5.confirmText:" //确认按钮文字"
6.showCancel: false, // 是否显示取消按钮 是:true(默认) 否:false
7.maskClick: true // 是否允许点击遮罩层关闭弹窗 是:true 否:false(默认)
参数二(cd1):点击确认按钮执行逻辑，
参数三(cd2):点击取消按钮执行逻辑。
/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) { // 如果只显示确认按钮需要重新设置按钮的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", { //创建底部图标菜单
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
页面调用全局弹窗
<script>
export default {
onLoad() {
// #ifdef APP-PLUS
// 参数一:弹窗信息(所有属性可不填，会有默认值)
let AppPopupInfo = {
// title:"", //标题
// content:"", //内容
// confirmBoxColor:"", //确认按钮背景色
// cancelText:"", //取消按钮文字
// confirmText:" //确认按钮文字",
// showCancel: false, // 是否显示取消按钮 是:true(默认) 否:false
// maskClick: true // 是否允许点击遮罩层关闭弹窗 是:true 否:false(默认)
}
// 参数二:点击确认按钮执行逻辑
const affirmBtn = () => {
console.log("点击了确认按钮");
}
// 参数三:点击取消按钮执行逻辑
const cancelBtn = () => {
console.log("点击了取消按钮");
}
this.AppPopupView(AppPopupInfo, affirmBtn, cancelBtn)
// #endif
},
}
</script>效果图
到此这篇关于uniapp定义new plus.nativeObj.View实现APP端全局弹窗的文章就介绍到这了,更多相关uniapp全局弹窗内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！