Mokevip
Mokevip
  • 发布:2022-11-26 14:02
  • 更新:2024-04-12 17:17
  • 阅读:354

【报Bug】popup中使用父组件的插槽,会导致弹窗mask还在,但是内容消失

分类:uni-app

产品分类: 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') 也不会发生改变

2022-11-26 14:02 负责人:无 分享
已邀请:
Mokevip

Mokevip (作者)

刚刚试了,在使用插槽时,不使用v-model 改用 @change 手动触更新也会触发这个bug

Mokevip

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

Mokevip (作者)

问题还是在的,只是我封装unipopup的时候用绝对定位定位住了。。

Mokevip

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

解决了吗?我也遇到了

1***@qq.com

1***@qq.com

我是在uni-popup里嵌套uni-card,uni-card里触发emit,结果uni-card消失,当蒙层还在,查看结构也是位置发生位移了

要回复问题请先登录注册

  • 标题 / 粗斜体
  • 代码片段
  • 超链接 / 图片 / 视频
  • 列表 / 引用

文章内容较多时,可以用标题分段 :

## 大标题 
### 小标题

斜体 / 粗体 :

**粗体** 
*斜体*
***粗斜体***

代码片段 :

``` javascript
代码片段
```

超链接 :

[链接文字](链接地址) 例: [百度](http://www.baidu.com)

图片 :

![图片说明](图片地址) 例: ![百度logo](http://www.baidu.com/img/bdlogo.gif)

视频 :

!![视频说明](视频地址) 例: !![优酷视频](http://youku.com)

有序列表 :

1. 123
2. 123
3. 123

无序列表 :

- 123
- 123
- 123

引用 : ( 双回车后结束引用 )

> 引用内容
引用内容
引用内容