uniapp定義new plus.nativeObj.View實(shí)現(xiàn)APP端全局彈窗功能
為什么要用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
頁(yè)面調(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)文章
vxe-table?實(shí)現(xiàn)表格數(shù)據(jù)分組功能(按指定字段數(shù)據(jù)分組)
文章介紹了如何使用樹(shù)結(jié)構(gòu)實(shí)現(xiàn)表格數(shù)據(jù)分組,并提供了官方文檔的鏈接,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-11-11vue-cli 2.*中導(dǎo)入公共less文件的方法步驟
這篇文章主要介紹了vue-cli 2.*中導(dǎo)入公共less文件的方法步驟,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11electron-vite工具打包后如何通過(guò)內(nèi)置配置文件動(dòng)態(tài)修改接口地址
使用electron-vite?工具開(kāi)發(fā)項(xiàng)目打包完后每次要改接口地址都要重新打包,對(duì)于多環(huán)境切換或者頻繁變更接口地址就顯得麻煩,這篇文章主要介紹了electron-vite工具打包后通過(guò)內(nèi)置配置文件動(dòng)態(tài)修改接口地址實(shí)現(xiàn)方法,需要的朋友可以參考下2024-05-05Vue+elementUI實(shí)現(xiàn)多圖片上傳與回顯功能(含回顯后繼續(xù)上傳或刪除)
這篇文章主要介紹了Vue+elementUI實(shí)現(xiàn)多圖片上傳與回顯功能(含回顯后繼續(xù)上傳或刪除),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-03-03vue后臺(tái)系統(tǒng)管理項(xiàng)目之角色權(quán)限分配管理功能(示例詳解)
這篇文章主要介紹了vue后臺(tái)系統(tǒng)管理項(xiàng)目-角色權(quán)限分配管理功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-09-09Vue3響應(yīng)式對(duì)象是如何實(shí)現(xiàn)的(1)
這篇文章主要介紹了Vue3響應(yīng)式對(duì)象是如何實(shí)現(xiàn)的,文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹具有一定的參考價(jià)值,需要的小伙伴可以參考一下2022-08-08vue前端測(cè)試開(kāi)發(fā)watch監(jiān)聽(tīng)data的數(shù)據(jù)變化
這篇文章主要為大家介紹了vue測(cè)試開(kāi)發(fā)watch監(jiān)聽(tīng)data的數(shù)據(jù)變化,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-05-05Vue 動(dòng)態(tài)生成數(shù)據(jù)字段的實(shí)例
這篇文章主要介紹了Vue 動(dòng)態(tài)生成數(shù)據(jù)字段的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04