为什么要用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>效果图
