解决uni-app官方弹框popup关闭不了问题；/pages/extUI/popup/popup；uni-app弹框popup打开调用事件。unin-app弹框封装；
生活随笔
收集整理的這篇文章主要介紹了
解决uni-app官方弹框popup关闭不了问题；/pages/extUI/popup/popup；uni-app弹框popup打开调用事件。unin-app弹框封装；
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
官方uni-app的彈框popup模板問題:
官方的彈框示例頁面在 /pages/extUI/popup/popup
問題見下圖：
修改封裝后：
彈框點擊確認未添加遮罩層：導致loading時候仍然可以點擊取消按鈕
點擊去人添加遮罩層后：
注意：只是封裝了三個彈框 可以直接復制這三個子組件進行使用，需要更改popup.js的引入路徑
1.彈框頁面 tk.vue：
<template><view>官方uni-app的彈框popup模板問題:<br />官方的彈框示例頁面在 /pages/extUI/popup/popup1.官方是沒有在引入的組件上寫@close關閉彈窗方法的 需要自己加<br />2.官方是點擊確認時候 立即就關閉彈框了 但是loading還在<br />原因是子組件小程序 立即就觸發關閉事件了改成在父級的loading消失后關閉即可 <br />3.官方的popup彈框 自動打開后<br />關閉不了 只需要將38行代碼 before-close屬性值改成 false 即可<br />4.彈框子組件 不是頁面 故沒有自己的 onLoad 和 onShow 方法，<br />同時ta自己的 created 方法在已進入到父級頁面時候就已經觸發了<br />（問題是可能有需求是，點擊彈框后，拿父級參數掉接口獲取數據展示）<br />（如果寫在子組件彈框的created 沒父級參數 且一進入父級頁面就掉接口了）<br />（那么就需要找到一個點擊打開彈框時候，必須調用的方法，在里面掉接口）<br />詳細見第三個按鈕 每次點擊打開時候觸發first掉接口 <br />5.如果是tabBarA頁面 彈框打開后 未關閉 就點擊另一個tabBar B頁面 <br />然后再切換A頁面你會發現彈框還是打開的 所以需要我們在A頁面 <br />hide隱藏時候判斷如果存在未關閉的彈框 就調用取消按鈕 關閉掉<br />6.官方的popup彈框 點擊確定時候 雖然有loading<br />但是此時仍然可以點擊取消按鈕 或者點擊彈框下的頁面內容<br />解決思路：點擊確認時候添加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關閉彈窗方法的 需要自己加 --><my-dialog-input mode="input" title="輸入內容" value="對話框預置提示內容!" placeholder="請輸入內容" @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="輸入內容" value="對話框預置提示內容!" placeholder="請輸入內容" @close="nodialogdel" @confirm="yesdialogdel"></my-dialog-del></uni-popup><button class="button" type="primary" @click="openFirst"><text class="button-text">每次點擊打開時候觸發first掉接口</text></button><uni-popup id="mydialogfirst" ref="mydialogfirst" type="dialog" @change="change"><!-- 需要給子組件設置ref 才能獲取到子組件的方法 才能觸發 first --><my-dialog-first ref="myselffirst" mode="input" title="輸入內容" value="對話框預置提示內容!" placeholder="請輸入內容" @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="輸入內容" value="對話框預置提示內容!" placeholder="請輸入內容" @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="點擊查看 具體解決 打開彈框觸發first方法"></uni-link></view> </template><script> // 子組件符合easycom組件規范 故不需引入 直接使用即可 easycom組件規范：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 () {// 隱藏時候判斷 如果存在未關閉的彈框 就調用取消按鈕 關閉掉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秒后會關閉',})console.log(done)setTimeout(() => {this.$refs.dialogInput.close()uni.hideLoading()// 關閉窗口后，恢復默認內容}, 3000)},nodialoginput () {// 調用子級的彈框關閉窗口方法后，恢復默認內容this.$refs.dialogInput.close()},// 以下三個方法是按鈕二：刪除彈框封裝openDel () {this.$refs.mydialogdel.open()},yesdialogdel (done) {uni.showLoading({title: '3秒后會關閉',})console.log('點擊確認傳遞的參數', done)setTimeout(() => {// 調用刪除的接口this.delId = done.iduni.hideLoading()// 調用子級的彈框關閉窗口方法后，恢復默認內容this.$refs.mydialogdel.close()this.delId = null}, 3000)},nodialogdel () {// 調用子級的彈框關閉窗口方法后，恢復默認內容this.$refs.mydialogdel.close()this.delId = null},// 以下三個方法是按鈕三：觸發打開彈框的初始化openFirst () {console.log('點擊了父級的打開按鈕')this.$refs.mydialogfirst.open()this.$refs.myselffirst.first()},yesdialogfirst (done) {uni.showLoading({title: '3秒后會關閉',})console.log('點擊確認傳遞的參數', done)setTimeout(() => {// 調用刪除的接口this.delId = done.iduni.hideLoading()// 調用子級的彈框關閉窗口方法后，恢復默認內容this.$refs.mydialogfirst.close()this.delId = null}, 3000)},nodialogfirst () {// 調用子級的彈框關閉窗口方法后，恢復默認內容this.$refs.mydialogfirst.close()this.delId = null},// 以下三個方法是按鈕四：添加遮罩層處理openzhezhaoceng () {this.$refs.mydialogdel2.open()},yesdialogdel2 (done) {// 再點擊確認的時候 打開遮罩層this.$refs.zhezhaoceng.open()uni.showLoading({title: '3秒后會關閉',})setTimeout(() => {// 調用刪除的接口this.delId = done.iduni.hideLoading()//loading消失 就去掉遮罩層this.$refs.zhezhaoceng.close()// 調用子級的彈框關閉窗口方法后，恢復默認內容this.$refs.mydialogdel2.close()this.delId = null}, 3000)},nodialogdel2 () {// 調用子級的彈框關閉窗口方法后，恢復默認內容this.$refs.mydialogdel2.close()this.delId = null},/*** popup 狀態發生變化觸發* @param {Object} e*/change (e) {console.log('popup ' + e.type + ' 狀態', 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.子組件觸發first彈框： 參考另一篇觸發時機
<template><view class="uni-popup-dialog"><view class="del-content">在first（）方法內做初始化或者掉接口獲取數據展示</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 模式下的默認值* @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 基礎對話框* @value input 可輸入對話框* @property {String} content 對話框內容* @property {Boolean} beforeClose 是否攔截取消事件* @event {Function} confirm 點擊確認按鈕觸發* @event {Function} close 點擊取消按鈕觸發*/export default {name: "uniPopupDialog",mixins: [popup],props: {value: {type: [String, Number],default: ''},placeholder: {type: [String, Number],default: '請輸入內容'},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: {// 這個方法只有每次點擊打開彈框時候才會觸發---相當于自己的一個created---在這個方法內做初始化first() {uni.showToast({title: '打開就觸發first',icon: 'success',mask: true})},/*** 點擊確認按鈕*/onOk() {if (this.mode === 'input') {// this.$emit('confirm', this.val)// 點擊確定傳遞的值console.log(1111);this.$emit('confirm', { id: 11 })} else {this.$emit('confirm')}// 這個是真正的關閉彈框操作 --- 原生是打開的 我們需要手動注釋掉// if (this.beforeClose) return// this.popup.close()},/*** 點擊取消按鈕*/closeDialog() {this.$emit('close')// 這個是真正的關閉彈框操作 --- 原生是打開的 我們需要手動注釋掉// if (this.beforeClose) return// this.popup.close()},// 這個是原生調用真證的關閉的方法 -------我們在父級里來調用------已完成確認和取消時候關閉彈框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;},} }以上代碼可以直接復制使用，但是前提是uni-app的項目，且組件的引入要正確！
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的解决uni-app官方弹框popup关闭不了问题；/pages/extUI/popup/popup；uni-app弹框popup打开调用事件。unin-app弹框封装；的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 电商ERP源码
- 下一篇： Quartus II 13.1入门级使用