當(dāng)前位置:
首頁 >
解决uni-app官方弹框popup关闭不了问题;/pages/extUI/popup/popup;uni-app弹框popup打开调用事件。unin-app弹框封装;
發(fā)布時間:2023/12/9
38
豆豆
生活随笔
收集整理的這篇文章主要介紹了
解决uni-app官方弹框popup关闭不了问题;/pages/extUI/popup/popup;uni-app弹框popup打开调用事件。unin-app弹框封装;
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

官方uni-app的彈框popup模板問題:
官方的彈框示例頁面在 /pages/extUI/popup/popup
問題見下圖:
修改封裝后:
彈框點擊確認(rèn)未添加遮罩層:導(dǎo)致loading時候仍然可以點擊取消按鈕
點擊去人添加遮罩層后:
注意:只是封裝了三個彈框 可以直接復(fù)制這三個子組件進(jìn)行使用,需要更改popup.js的引入路徑
1.彈框頁面 tk.vue:
<template><view>官方uni-app的彈框popup模板問題:<br />官方的彈框示例頁面在 /pages/extUI/popup/popup1.官方是沒有在引入的組件上寫@close關(guān)閉彈窗方法的 需要自己加<br />2.官方是點擊確認(rèn)時候 立即就關(guān)閉彈框了 但是loading還在<br />原因是子組件小程序 立即就觸發(fā)關(guān)閉事件了改成在父級的loading消失后關(guān)閉即可 <br />3.官方的popup彈框 自動打開后<br />關(guān)閉不了 只需要將38行代碼 before-close屬性值改成 false 即可<br />4.彈框子組件 不是頁面 故沒有自己的 onLoad 和 onShow 方法,<br />同時ta自己的 created 方法在已進(jìn)入到父級頁面時候就已經(jīng)觸發(fā)了<br />(問題是可能有需求是,點擊彈框后,拿父級參數(shù)掉接口獲取數(shù)據(jù)展示)<br />(如果寫在子組件彈框的created 沒父級參數(shù) 且一進(jìn)入父級頁面就掉接口了)<br />(那么就需要找到一個點擊打開彈框時候,必須調(diào)用的方法,在里面掉接口)<br />詳細(xì)見第三個按鈕 每次點擊打開時候觸發(fā)first掉接口 <br />5.如果是tabBarA頁面 彈框打開后 未關(guān)閉 就點擊另一個tabBar B頁面 <br />然后再切換A頁面你會發(fā)現(xiàn)彈框還是打開的 所以需要我們在A頁面 <br />hide隱藏時候判斷如果存在未關(guān)閉的彈框 就調(diào)用取消按鈕 關(guān)閉掉<br />6.官方的popup彈框 點擊確定時候 雖然有l(wèi)oading<br />但是此時仍然可以點擊取消按鈕 或者點擊彈框下的頁面內(nèi)容<br />解決思路:點擊確認(rèn)時候添加uni-popup遮罩層<br /><button class="button" type="primary" @click="confirmDialog"><text class="button-text">輸入對話框</text></button><uni-popup id="dialogInput" ref="dialogInput" type="dialog" @change="change"><!-- 官方是沒有在引入的組件上寫@close關(guān)閉彈窗方法的 需要自己加 --><my-dialog-input mode="input" title="輸入內(nèi)容" value="對話框預(yù)置提示內(nèi)容!" placeholder="請輸入內(nèi)容" @close="nodialoginput" @confirm="dialogInputConfirm"></my-dialog-input></uni-popup><button class="button" type="primary" @click="openDel"><text class="button-text">刪除對話框</text></button><uni-popup id="mydialogdel" ref="mydialogdel" type="dialog" @change="change"><my-dialog-del mode="input" title="輸入內(nèi)容" value="對話框預(yù)置提示內(nèi)容!" placeholder="請輸入內(nèi)容" @close="nodialogdel" @confirm="yesdialogdel"></my-dialog-del></uni-popup><button class="button" type="primary" @click="openFirst"><text class="button-text">每次點擊打開時候觸發(fā)first掉接口</text></button><uni-popup id="mydialogfirst" ref="mydialogfirst" type="dialog" @change="change"><!-- 需要給子組件設(shè)置ref 才能獲取到子組件的方法 才能觸發(fā) first --><my-dialog-first ref="myselffirst" mode="input" title="輸入內(nèi)容" value="對話框預(yù)置提示內(nèi)容!" placeholder="請輸入內(nèi)容" @close="nodialogfirst" @confirm="yesdialogfirst"></my-dialog-first></uni-popup><button type="primary" @click="openzhezhaoceng">解決loading...時候仍可點擊問題</button><uni-popup id="mydialogdel2" ref="mydialogdel2" type="dialog" @change="change"><my-dialog-del mode="input" title="輸入內(nèi)容" value="對話框預(yù)置提示內(nèi)容!" placeholder="請輸入內(nèi)容" @close="nodialogdel2" @confirm="yesdialogdel2"></my-dialog-del></uni-popup><!-- 多加一個遮罩層 并且使遮罩層全屏 --><uni-popup id="zhezhaoceng" ref="zhezhaoceng" type="dialog" @change="change"><view class="all-box"></view></uni-popup><uni-link href="https://uniapp.dcloud.io/component/?id=easycom%e7%bb%84%e4%bb%b6%e8%a7%84%e8%8c%83" text="點擊查看 具體解決 打開彈框觸發(fā)first方法"></uni-link></view> </template><script> // 子組件符合easycom組件規(guī)范 故不需引入 直接使用即可 easycom組件規(guī)范:https://uniapp.dcloud.io/component/?id=easycom%e7%bb%84%e4%bb%b6%e8%a7%84%e8%8c%83 export default {data () {return {delId: null,a: ""}},onHide () {// 隱藏時候判斷 如果存在未關(guān)閉的彈框 就調(diào)用取消按鈕 關(guān)閉掉if (this.$refs['dialogInput']) {this.$refs['dialogInput'].close()}if (this.$refs['mydialogdel']) {this.nodialogdel()}if (this.$refs['mydialogfirst']) {this.nodialogfirst()}},methods: {// 以下三個方法是按鈕一:提交信息彈框confirmDialog () {this.$refs.dialogInput.open()},// 輸入對話框的確定事件dialogInputConfirm (done) {uni.showLoading({title: '3秒后會關(guān)閉',})console.log(done)setTimeout(() => {this.$refs.dialogInput.close()uni.hideLoading()// 關(guān)閉窗口后,恢復(fù)默認(rèn)內(nèi)容}, 3000)},nodialoginput () {// 調(diào)用子級的彈框關(guān)閉窗口方法后,恢復(fù)默認(rèn)內(nèi)容this.$refs.dialogInput.close()},// 以下三個方法是按鈕二:刪除彈框封裝openDel () {this.$refs.mydialogdel.open()},yesdialogdel (done) {uni.showLoading({title: '3秒后會關(guān)閉',})console.log('點擊確認(rèn)傳遞的參數(shù)', done)setTimeout(() => {// 調(diào)用刪除的接口this.delId = done.iduni.hideLoading()// 調(diào)用子級的彈框關(guān)閉窗口方法后,恢復(fù)默認(rèn)內(nèi)容this.$refs.mydialogdel.close()this.delId = null}, 3000)},nodialogdel () {// 調(diào)用子級的彈框關(guān)閉窗口方法后,恢復(fù)默認(rèn)內(nèi)容this.$refs.mydialogdel.close()this.delId = null},// 以下三個方法是按鈕三:觸發(fā)打開彈框的初始化openFirst () {console.log('點擊了父級的打開按鈕')this.$refs.mydialogfirst.open()this.$refs.myselffirst.first()},yesdialogfirst (done) {uni.showLoading({title: '3秒后會關(guān)閉',})console.log('點擊確認(rèn)傳遞的參數(shù)', done)setTimeout(() => {// 調(diào)用刪除的接口this.delId = done.iduni.hideLoading()// 調(diào)用子級的彈框關(guān)閉窗口方法后,恢復(fù)默認(rèn)內(nèi)容this.$refs.mydialogfirst.close()this.delId = null}, 3000)},nodialogfirst () {// 調(diào)用子級的彈框關(guān)閉窗口方法后,恢復(fù)默認(rèn)內(nèi)容this.$refs.mydialogfirst.close()this.delId = null},// 以下三個方法是按鈕四:添加遮罩層處理openzhezhaoceng () {this.$refs.mydialogdel2.open()},yesdialogdel2 (done) {// 再點擊確認(rèn)的時候 打開遮罩層this.$refs.zhezhaoceng.open()uni.showLoading({title: '3秒后會關(guān)閉',})setTimeout(() => {// 調(diào)用刪除的接口this.delId = done.iduni.hideLoading()//loading消失 就去掉遮罩層this.$refs.zhezhaoceng.close()// 調(diào)用子級的彈框關(guān)閉窗口方法后,恢復(fù)默認(rèn)內(nèi)容this.$refs.mydialogdel2.close()this.delId = null}, 3000)},nodialogdel2 () {// 調(diào)用子級的彈框關(guān)閉窗口方法后,恢復(fù)默認(rèn)內(nèi)容this.$refs.mydialogdel2.close()this.delId = null},/*** popup 狀態(tài)發(fā)生變化觸發(fā)* @param {Object} e*/change (e) {console.log('popup ' + e.type + ' 狀態(tài)', e.show)},}, } </script><style lang="less" scoped> button {margin-top: 20rpx; }.all-box {width: -webkit-calc(~"100vw") !important;width: -moz-calc(~"100vw") !important;width: calc(~"100vw") !important;height: -webkit-calc(~"100vh") !important;height: -moz-calc(~"100vh") !important;height: calc(~"100vh") !important; } </style>2.子組件刪除彈框
3.子組件觸發(fā)first彈框: 參考另一篇觸發(fā)時機
<template><view class="uni-popup-dialog"><view class="del-content">在first()方法內(nèi)做初始化或者掉接口獲取數(shù)據(jù)展示</view><view class="uni-dialog-button-group"><view class="uni-dialog-button" @click="closeDialog"><text class="uni-dialog-button-text">取消</text></view><view class="uni-dialog-button uni-border-left" @click="onOk"><text class="uni-dialog-button-text uni-button-color">確定</text></view></view></view> </template><script> import popup from '../popup.js' /*** PopUp 彈出層-對話框樣式* @description 彈出層-對話框樣式* @tutorial https://ext.dcloud.net.cn/plugin?id=329* @property {String} value input 模式下的默認(rèn)值* @property {String} placeholder input 模式下輸入提示* @property {String} type = [success|warning|info|error] 主題樣式* @value success 成功* @value warning 提示* @value info 消息* @value error 錯誤* @property {String} mode = [base|input] 模式、* @value base 基礎(chǔ)對話框* @value input 可輸入對話框* @property {String} content 對話框內(nèi)容* @property {Boolean} beforeClose 是否攔截取消事件* @event {Function} confirm 點擊確認(rèn)按鈕觸發(fā)* @event {Function} close 點擊取消按鈕觸發(fā)*/export default {name: "uniPopupDialog",mixins: [popup],props: {value: {type: [String, Number],default: ''},placeholder: {type: [String, Number],default: '請輸入內(nèi)容'},type: {type: String,default: 'error'},mode: {type: String,default: 'base'},title: {type: String,default: '提示'},content: {type: String,default: ''},beforeClose: {type: Boolean,default: false}},data() {return {dialogType: 'error',focus: false,val: ""}},watch: {type(val) {this.dialogType = val},mode(val) {if (val === 'input') {this.dialogType = 'info'}},value(val) {this.val = val}},onLoad(options) {console.log('子組件彈框的 onLoad');},onShow() {console.log('子組件彈框的 onShow');},created() {console.log('子組件彈框的 created');// 對話框遮罩不可點擊this.popup.disableMask()// this.popup.closeMask()if (this.mode === 'input') {this.dialogType = 'info'this.val = this.value} else {this.dialogType = this.type}},mounted() {this.focus = true},methods: {// 這個方法只有每次點擊打開彈框時候才會觸發(fā)---相當(dāng)于自己的一個created---在這個方法內(nèi)做初始化first() {uni.showToast({title: '打開就觸發(fā)first',icon: 'success',mask: true})},/*** 點擊確認(rèn)按鈕*/onOk() {if (this.mode === 'input') {// this.$emit('confirm', this.val)// 點擊確定傳遞的值console.log(1111);this.$emit('confirm', { id: 11 })} else {this.$emit('confirm')}// 這個是真正的關(guān)閉彈框操作 --- 原生是打開的 我們需要手動注釋掉// if (this.beforeClose) return// this.popup.close()},/*** 點擊取消按鈕*/closeDialog() {this.$emit('close')// 這個是真正的關(guān)閉彈框操作 --- 原生是打開的 我們需要手動注釋掉// if (this.beforeClose) return// this.popup.close()},// 這個是原生調(diào)用真證的關(guān)閉的方法 -------我們在父級里來調(diào)用------已完成確認(rèn)和取消時候關(guān)閉彈框close() {this.popup.close()}} } </script><style lang="scss" scoped> .uni-popup-dialog {width: 300px;border-radius: 15px;background-color: #fff; }.uni-dialog-title {/* #ifndef APP-NVUE */display: flex;/* #endif */flex-direction: row;justify-content: center;padding-top: 15px;padding-bottom: 5px; }.uni-dialog-title-text {font-size: 16px;font-weight: 500; }.uni-dialog-content {/* #ifndef APP-NVUE */display: flex;/* #endif */flex-direction: row;justify-content: center;align-items: center;padding: 5px 15px 15px 15px; }.uni-dialog-content-text {font-size: 14px;color: #6e6e6e; }.uni-dialog-button-group {/* #ifndef APP-NVUE */display: flex;/* #endif */flex-direction: row;border-top-color: #f5f5f5;border-top-style: solid;border-top-width: 1px; }.uni-dialog-button {/* #ifndef APP-NVUE */display: flex;/* #endif */flex: 1;flex-direction: row;justify-content: center;align-items: center;height: 45px; }.uni-border-left {border-left-color: #f0f0f0;border-left-style: solid;border-left-width: 1px; }.uni-dialog-button-text {font-size: 14px; }.uni-button-color {color: #007aff; }.uni-dialog-input {flex: 1;font-size: 14px;border: 1px #eee solid;height: 40px;padding: 0 10px;border-radius: 5px;color: #555; }.uni-popup__success {color: #4cd964; }.uni-popup__warn {color: #f0ad4e; }.uni-popup__error {color: #dd524d; }.uni-popup__info {color: #909399; } </style><style lang="less" scoped> .del-content {padding: 50rpx;text-align: center; } </style>4.子組件提交信息彈框:
5.彈框必須引入的popup.js
export default {data() {return {}},created(){this.popup = this.getParent()},methods:{/*** 獲取父元素實例*/getParent(name = 'uniPopup') {let parent = this.$parent;let parentName = parent.$options.name;while (parentName !== name) {parent = parent.$parent;if (!parent) return falseparentName = parent.$options.name;}return parent;},} }以上代碼可以直接復(fù)制使用,但是前提是uni-app的項目,且組件的引入要正確!
創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯,堅持創(chuàng)作打卡瓜分現(xiàn)金大獎總結(jié)
以上是生活随笔為你收集整理的解决uni-app官方弹框popup关闭不了问题;/pages/extUI/popup/popup;uni-app弹框popup打开调用事件。unin-app弹框封装;的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 电商ERP源码
- 下一篇: Quartus II 13.1入门级使用