十五春会
十五春会
  • 发布:2024-06-18 10:04
  • 更新:2024-06-19 09:47
  • 阅读:330

#插件讨论# 【 uni-popup 弹出层 - DCloud前端团队 】uni-popup使用slot或响应式数据变更时,弹窗会自动关闭的问题

分类:uni-app

产品分类: uniapp/H5

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: 10.0.19045

HBuilderX类型: 正式

HBuilderX版本号: 4.15

浏览器平台: Chrome

浏览器版本: 任意

项目创建方式: HBuilderX

示例代码:

页面代码:

复制代码<template>  
  <view class="container">  
    <popup-model :temp="temp.length" @handleClick="temp.length++;">  
      <view>我是slot</view>  
    </popup-model>  
  </view>  
</template>  

<script setup>  
  import {  
    computed,  
    ref  
  } from 'vue'  
  const temp = ref([])  
</script>

popup-model组件代码:

复制代码<template>  
  <view>  
    <button class="button" type="primary" @click="showPopup">显示popup</button>  
  </view>  
  <!-- 普通弹窗 -->  
  <uni-popup ref="popup" type="bottom">  
    <view style=" background-color: white;border-radius: 20rpx 20rpx 0 0;margin-bottom: 102rpx;overflow: hidden;">  
      <button class="text" @click="emit('handleClick')">更新temp</button>  
      <slot></slot>  
    </view>  
  </uni-popup>  
</template>  

<script setup>  
  import {  
    ref  
  } from 'vue'  
  const emit = defineEmits(['handleClick'])  
  const popup = ref()  

  const showPopup = () => {  
    if (popup.value.showPopup) {  
      popup.value.close();  
    } else {  
      popup.value.open();  
    }  
  };  
</script>

操作步骤:

点击【更新temp】按钮

预期结果:

点击更新temp就不自动关闭弹窗

实际结果:

点击更新temp就会自动关闭弹窗

bug描述:

二次封装uni-popup组件,并提供插槽给页面使用。

点击按钮后子组件调用父组件方法,修改响应式数据的值,此时弹窗自动关闭。

经过测试发现:删除:temp="temp.length"代码,不给父组件传值的时候,不会有这个问题。或者删除子组件里的<slot></slot>行,也不会产生这个问题。

2024-06-18 10:04 负责人:无 分享
已邀请:
十五春会

十五春会 (作者)

没人管uni-popup了吗.../_ \

要回复问题请先登录注册

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

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

## 大标题 
### 小标题

斜体 / 粗体 :

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

代码片段 :

``` 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

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

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