uniapp定義new plus.nativeObj.View實(shí)現(xiàn)APP端全局彈窗功能
更新時(shí)間：2024年11月28日 10:54:58 作者：new出一個(gè)對(duì)象
文章介紹了在UniApp中使用`newplus.nativeObj.View`實(shí)現(xiàn)彈窗的原因和方法,它定義了一個(gè)`AppPopupView`彈窗函數(shù),并在`main.js`中掛載到全局頁面,以便在任何地方調(diào)用,感興趣的朋友跟隨小編一起看看吧
為什么要用new plus.nativeObj.View在APP端實(shí)現(xiàn)彈窗？因?yàn)閡ni.showModal在APP端太難看了。
AppPopupView彈窗函數(shù)參數(shù)定義
參數(shù)一:彈窗信息(所有屬性可不填，會(huì)有默認(rèn)值)
1.title:"", //標(biāo)題
2.content:"", //內(nèi)容
3.confirmBoxColor:"", //確認(rèn)按鈕背景色
4.cancelText:"", //取消按鈕文字
5.confirmText:" //確認(rèn)按鈕文字"
6.showCancel: false, // 是否顯示取消按鈕 是:true(默認(rèn)) 否:false
7.maskClick: true // 是否允許點(diǎn)擊遮罩層關(guān)閉彈窗 是:true 否:false(默認(rèn))
參數(shù)二(cd1):點(diǎn)擊確認(rèn)按鈕執(zhí)行邏輯，
參數(shù)三(cd2):點(diǎn)擊取消按鈕執(zhí)行邏輯。
/utils/AppPopupView.js 定義彈窗文件
export default AppPopupView
function AppPopupView({
title = '提示',
content = '',
confirmBoxColor = '#41a863',
cancelText = "取消",
confirmText = "確認(rèn)",
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 || '確認(rèn)要操作嗎?',
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 || '確認(rèn)',
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) { // 如果只顯示確認(rèn)按鈕需要重新設(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)建底部圖標(biāo)菜單
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("確認(rèn)");
maskLayer.hide()
popupView.hide()
cd1 && cd1()
}
}
} else {
maskLayer.hide()
popupView.hide()
cd1 && cd1()
}
}
})
popupView.draw(popupViewContentList)
// 點(diǎn)擊遮罩層
maskLayer.addEventListener("click", function() { //處理遮罩層點(diǎn)擊
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ù)一:彈窗信息(所有屬性可不填，會(huì)有默認(rèn)值)
let AppPopupInfo = {
// title:"", //標(biāo)題
// content:"", //內(nèi)容
// confirmBoxColor:"", //確認(rèn)按鈕背景色
// cancelText:"", //取消按鈕文字
// confirmText:" //確認(rèn)按鈕文字",
// showCancel: false, // 是否顯示取消按鈕 是:true(默認(rèn)) 否:false
// maskClick: true // 是否允許點(diǎn)擊遮罩層關(guān)閉彈窗 是:true 否:false(默認(rèn))
}
// 參數(shù)二:點(diǎn)擊確認(rèn)按鈕執(zhí)行邏輯
const affirmBtn = () => {
console.log("點(diǎn)擊了確認(rèn)按鈕");
}
// 參數(shù)三:點(diǎn)擊取消按鈕執(zhí)行邏輯
const cancelBtn = () => {
console.log("點(diǎn)擊了取消按鈕");
}
this.AppPopupView(AppPopupInfo, affirmBtn, cancelBtn)
// #endif
},
}
</script>效果圖
到此這篇關(guān)于uniapp定義new plus.nativeObj.View實(shí)現(xiàn)APP端全局彈窗的文章就介紹到這了,更多相關(guān)uniapp全局彈窗內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Axios代理配置及封裝響應(yīng)攔截處理方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vxe-table?實(shí)現(xiàn)表格數(shù)據(jù)分組功能(按指定字段數(shù)據(jù)分組)
文章介紹了如何使用樹結(jié)構(gòu)實(shí)現(xiàn)表格數(shù)據(jù)分組,并提供了官方文檔的鏈接,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-11-11
vue-cli 2.*中導(dǎo)入公共less文件的方法步驟
這篇文章主要介紹了vue-cli 2.*中導(dǎo)入公共less文件的方法步驟，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-11-11
electron-vite工具打包后如何通過內(nèi)置配置文件動(dòng)態(tài)修改接口地址
使用electron-vite?工具開發(fā)項(xiàng)目打包完后每次要改接口地址都要重新打包,對(duì)于多環(huán)境切換或者頻繁變更接口地址就顯得麻煩,這篇文章主要介紹了electron-vite工具打包后通過內(nèi)置配置文件動(dòng)態(tài)修改接口地址實(shí)現(xiàn)方法,需要的朋友可以參考下2024-05-05
Vue+elementUI實(shí)現(xiàn)多圖片上傳與回顯功能（含回顯后繼續(xù)上傳或刪除）
這篇文章主要介紹了Vue+elementUI實(shí)現(xiàn)多圖片上傳與回顯功能（含回顯后繼續(xù)上傳或刪除）,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-03-03
vue后臺(tái)系統(tǒng)管理項(xiàng)目之角色權(quán)限分配管理功能(示例詳解)
這篇文章主要介紹了vue后臺(tái)系統(tǒng)管理項(xiàng)目-角色權(quán)限分配管理功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-09-09
Vue3響應(yīng)式對(duì)象是如何實(shí)現(xiàn)的(1)
這篇文章主要介紹了Vue3響應(yīng)式對(duì)象是如何實(shí)現(xiàn)的，文章圍繞主題展開詳細(xì)的內(nèi)容介紹具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-08-08
vue前端測(cè)試開發(fā)watch監(jiān)聽data的數(shù)據(jù)變化
這篇文章主要為大家介紹了vue測(cè)試開發(fā)watch監(jiān)聽data的數(shù)據(jù)變化，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-05-05
Vue 動(dòng)態(tài)生成數(shù)據(jù)字段的實(shí)例
這篇文章主要介紹了Vue 動(dòng)態(tài)生成數(shù)據(jù)字段的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了Vue使用formData類型上傳文件方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08