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

#插件讨论# 【 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了吗.../_ \

要回复问题请先登录注册