上诉已描述

- 发布:2022-11-26 14:02
- 更新:2024-04-12 17:17
- 阅读:354
产品分类: uniapp/H5
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: win11
浏览器平台: Chrome
浏览器版本: 106.0.5249.119
项目创建方式: CLI
CLI版本号: ^3.0.0-alpha-3060920221114001
操作步骤:
预期结果:
不要隐藏显示
不要隐藏显示
实际结果:
会莫名其妙隐藏显示
会莫名其妙隐藏显示
bug描述:
目前是三层组件
第一层是界面,调用弹窗选择组件, 使用插槽定义结束按钮, 使用v-model:selected 标识选中列表
第二层是弹窗选择组件,调用弹窗组件, 包含自身内容,上级插槽
第三层是弹窗组件,包含了uni-popup
目前只要触发 selected 的更改,弹窗内容就会消失,但是背景色还在,看了没有触发任何其他事件和 show 的更新
目前所有内容都不改,不触发 emit('update:selected') 就不影响
目前所有内容都不改,在界面中不使用插槽,即使有 emit('update:selected') 也不会发生改变
6 个回复
Mokevip (作者)
刚刚试了,在使用插槽时,不使用v-model 改用 @change 手动触更新也会触发这个bug
Mokevip (作者)
发现了,我自己封装了一层,解决多层popup 弹窗嵌套问题的
复制代码
<template> <uni-popup @close="onClose" @change="onChange" ref="popupRef" class="popup" type="bottom"> <view class="popup-mask" @click.stop="onClose"> <view class="popup-box" @click.stop> <view v-if="props.title" class="popup-title">{{ props.title }}</view> <slot name="default" /> </view> </view> </uni-popup> </template> <script lang="ts" setup> import { ref, watch } from 'vue' const props = defineProps(['show', 'title']) const emits = defineEmits(['update:show', 'close']) const popupRef = ref(null) const onChange = (e: { show: boolean }) => { if (!e.show) { emits('close', e.show) emits('update:show', e.show) } } const onClose = () => { emits('close', false) emits('update:show', false) } // 监听show的更改 watch(() => props.show, () => { if (props.show) { (popupRef.value as unknown as { open: () => void }).open() } else { (popupRef.value as unknown as { close: () => void }).close() } }) </script> <style lang="scss" scoped> .popup { border-radius: 8rpx 8rpx 0 0; } .popup-mask { width: 100vw; height: 100vh; position: relative; } .popup-box { position: absolute; bottom: 0; background-color: white; border-radius: 8rpx 8rpx 0 0; width: 100vw; box-sizing: border-box; } .popup-title { padding: 20rpx 0 20rpx; text-align: center; font-size: 30rpx; } </style>
去掉 <view class="popup-mask" @click.stop="onClose"> 可以了
Mokevip (作者)
问题还是在的,只是我封装unipopup的时候用绝对定位定位住了。。
Mokevip (作者)
确定问题存在,在我触发更改时
复制代码
<uni-view class="" name="content" data-v-23943347="" style="transform: translateY(100%); opacity: 1; position: fixed; left: 0px; right: 0px; bottom: 0px; padding-bottom: 0px; background-color: transparent; transition: -webkit-transform 0.3s ease 0ms, transform ease 0ms; transform-origin: 50% 50%;">
属性发生移动
1***@qq.com
解决了吗?我也遇到了
1***@qq.com
我是在uni-popup里嵌套uni-card,uni-card里触发emit,结果uni-card消失,当蒙层还在,查看结构也是位置发生位移了