<template>
<view>
<!-- 普通弹窗 -->
<uni-popup ref="popup">
<text class="text">popup 内容</text>
</uni-popup>
</view>
<view>
<button @click="open_top">顶部弹出</button>
<uni-popup ref="popup_top"
type="top">顶部弹出 Popup</uni-popup>
</view>
<view>
<button @click="open_bottom">底部弹出</button>
<uni-popup ref="popup_bottom"
type="bottom">底部弹出 Popup</uni-popup>
</view>
<view class="example-body box">
<button class="button"
type="primary"
@click="toggle('top')"><text class="button-text">顶部</text></button>
<button class="button"
type="primary"
@click="toggle('bottom')"><text class="button-text">底部</text></button>
<button class="button"
type="primary"
@click="toggle('center')"><text class="button-text">居中</text></button>
<button class="button"
type="primary"
@click="toggle('left')"><text class="button-text">左侧</text></button>
<button class="button"
type="primary"
@click="toggle('right')"><text class="button-text">右侧</text></button>
</view>
</template>
<script setup
lang="ts">
import {
ref,
onMounted
} from 'vue';
const popup = ref(null);
const popup_bottom = ref(null);
const popup_top= ref(null);
function toggle(type: string) {
popup.value.open(type);
}
function open_top(){
popup_top.value.open();
}
function open_bottom() {
popup_bottom.value.open();
}
</script>
<style>
</style>
- 发布:2023-01-28 01:00
- 更新:2024-03-29 10:46
- 阅读:872
产品分类: HbuilderX
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: win10 LTSC 1809 (17763.3770)
HBuilderX版本号: 3.6.18
示例代码:
操作步骤:
见如上Vue3代码部分,Vue2的代码,请从上面插件市场的地址下载
见如上Vue3代码部分,Vue2的代码,请从上面插件市场的地址下载
预期结果:
如前
如前
实际结果:
如前
如前
uni-popup.vue里面有两个// #ifdef MP-WEIXIN,把第二个改成// #ifndef MP-ALIPAY就好了,没看懂,自己瞎改的,看懂的说下对不对
mounted() {
const fixSize = () => {
const {
windowWidth,
windowHeight,
windowTop,
safeArea,
screenHeight,
safeAreaInsets
} = uni.getSystemInfoSync()
this.popupWidth = windowWidth
this.popupHeight = windowHeight + (windowTop || 0)
// TODO fix by mehaotian 是否适配底部安全区 ,目前微信ios 、和 app ios 计算有差异,需要框架修复
if (safeArea && this.safeArea) {
// #ifdef MP-WEIXIN
this.safeAreaInsets = screenHeight - safeArea.bottom
// #endif
// #ifndef MP-ALIPAY
this.safeAreaInsets = safeAreaInsets.bottom
// #endif
} else {
this.safeAreaInsets = 0
}
}
2***@qq.com - 自由开发者
需要改一下uni-popup组件的源码,可能是开发人员粗心了:uni-popup.vue里面有两个// #ifdef MP-WEIXIN,把第二个改成// #ifndef MP-ALIPAY就好了
2***@qq.com
按照你的方法 确实是可以的,需要改一下uni-popup组件的源码,可能是开发人员粗心了
2024-03-29 10:43