彈框問題

/components/free-ui/free-nav-bar.vue

<template><view><view :class="getClass"><!-- 狀態欄 --><view :style="'height:'+statusBarHeight+'px'"></view><!-- 導航 --><view class="w-100 flex align-center justify-between" style="height: 90rpx;"><!-- 左邊 --><view class="flex align-center"><!-- 返回按鈕 --><!-- #ifndef MP --><free-icon-button v-if="showBack" @click="back"><text class="iconfont font-md">&#xe60d;</text></free-icon-button><!-- #endif --><!-- 標題 --><slot><text v-if="title" class="font-md ml-3">{{getTitle}}</text></slot></view><!-- 右邊 --><view class="flex align-center" v-if="showRight"><slot name="right"><free-icon-button @click="search"><text class="iconfont font-md">&#xe6e3;</text></free-icon-button><free-icon-button @click="openExtend"><text class="iconfont font-md">&#xe682;</text></free-icon-button></slot></view></view></view><!-- 占位 --><view v-if="fixed" :style="fixedStyle"></view><!-- 擴展菜單 --><free-popup v-if="showRight" ref="extend" :bodyWidth="320" :bodyHeight="525"bodyBgColor="bg-dark" transformOrigin="right top"><view class="flex flex-column" style="width: 320rpx;height: 525rpx;"><view class="flex-1 flex align-center" hover-class="bg-hover-dark"v-for="(item,index) in menus":key="index"@click="clickEvent(item)"><text class="iconfont pl-3 pr-2 font-md text-white">{{item.icon}}</text><text class="font-md text-white">{{item.name}}</text></view></view></free-popup></view> </template><script>import freeIconButton from "./free-icon-button.vue"import freePopup from "./free-popup.vue"export default {props: {showBack:{type:Boolean,default:false},backEvent:{type:Boolean,default:true},title: {type: [String,Boolean],default:false },fixed:{type:Boolean,default:true},noreadnum:{type:[Number,String],default:0},bgColor:{type:String,default:"bg-light"},showRight:{type:Boolean,default:true}},components:{freeIconButton,freePopup},data() {return {statusBarHeight:0,navBarHeight:0,menus:[{name:"發起群聊",event:"navigateTo",path:"/pages/mail/mail/mail?type=createGroup",icon:"\ue633"},{name:"添加好友",event:"navigateTo",path:"/pages/common/search/search",icon:"\ue65d"},// #ifndef H5{name:"掃一掃",event:"",icon:"\ue614"},// #endif{name:"收付款",event:"",icon:"\ue66c"},{name:"幫助與反饋",event:"",icon:"\ue66c"}],}},mounted() {// #ifdef APP-PLUS-NVUEthis.statusBarHeight = plus.navigator.getStatusbarHeight()// #endifthis.navBarHeight = this.statusBarHeight + uni.upx2px(90)},computed: {fixedStyle() {return `height:${this.navBarHeight}px`},getTitle(){let noreadnum = this.noreadnum > 0 ? '('+this.noreadnum+')' : ''return this.title + noreadnum},getClass(){let fixed = this.fixed?'fixed-top':''return `${fixed} ${this.bgColor}` }},methods: {openExtend() {this.$refs.extend.show(uni.upx2px(415),uni.upx2px(150))},// 返回back(){if(this.backEvent){return uni.navigateBack({delta: 1});}this.$emit('back')},search(){uni.navigateTo({url: '/pages/common/search/search'});},clickEvent(item){this.$refs.extend.hide()switch (item.event){case 'navigateTo':uni.navigateTo({url: item.path,});break;default:uni.showToast({title: '靚仔，自己發揮',icon: 'none'});break;}}},} </script><style> </style>

感謝大家觀看，我們下次見

總結

以上是生活随笔為你收集整理的uni-app 188修复弹框问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。